CKEditor with attritbutes

[vxda]

Hello,

Is there a way to enable attributes in HTML tags such as class="" and style="" for CKEditor ?.

Im building a website with alot of fields that can be edit from admin pannel, would be alot easyer if i could use CKEdit.
Ty in advance

[Manfred62]

in CKEditor this is possible. You have to use the 'Styles Combo' plugin. But I'm not sure how to do this inside PW.

http://docs.ckeditor.com/#!/guide/dev_styles

[vxda]

I found something in here :

http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter

but i cant wrap my head around it.

Can this be the answer to my poblem? if it is how can i implement it to PW CKEditor.

Cheers

[3fingers]

I found on this page ( http://docs.ckeditor.com/#!/guide/dev_plugins ) the following statement :

Installing Plugins Manually

If you prefer not to use CKBuilder, if you have plugins developer by yourself of by third parties or if you just want to test plugins before going through the CKBuilder process, you can also add plugins to your local installation, by following a few steps:

1. Extracting the zip file: Plugins are usually available as zip files. So, to start, be sure to have the zip extracted into a folder.

2. Copying the files into CKEditor: The easiest way to install the files is by simply copying them into the plugins folder of your CKEditor installation. They must be placed into a sub-folder that matches the "technical" name of the plugin. For example, the Magic Line plugin would be installed into this folder:<CKEditor folder>/plugins/magicline.

3. Enabling the plugin: Now it is time to tell CKEditor that you have a new plugin for it. For that, you simply use the extraPlugins configuration option:

   config.extraPlugins = 'magicline';

That's all. Your plugin will be now enabled in CKEditor

I think that this could be easiily recreated in PW, after installing the CKEditor plugin...I maybe wrong due to the fact that I didn't tested yet.

Could be useful?

[vxda]

Nope

I found on this page ( http://docs.ckeditor.com/#!/guide/dev_plugins ) the following statement :

I think that this could be easiily recreated in PW, after installing the CKEditor plugin...I maybe wrong due to the fact that I didn't tested yet.

Could be useful?

Nope ;/ still cant get it working ... it keeps filtering my class="" and style="".

[ryan]

I'm really liking CKEditor in usage, but admittedly don't know how to do a lot when it comes to extending it yet. But if you guys figure out how to do this, let me know what config options I can add to the module and I'll be glad to. 

[herschel666]

Hi.

I'm currently working on a CKEditor-plugin for a PW-site and I actually don't want to do this inside the modules-directory. If there was the possibility to load an extra-plugin by passing the path not the name, this would make the whole thing much easier.

[ryan]

I agree. But so far it looks to me like CKEditor requires its plugins to be in its dedicated plugins directory, unlike TinyMCE which lets you specify a second external plugins directory. We need a /site/modules/ and all they have is a /wire/modules/, so to speak. Chances are there is a way to do it that I just don't know about yet, but I've not been able to find it so far. 

[onjegolders]

Strangely, sometimes when I paste in code from a static site, CK Editor shows me the content in a styled fashion (which is great) but then when I click back onto the content I can't get the toolbar to come back (I'm using inline mode).

Other times, I seem to get default CK Editor styling.

Anyone else seen this?

Screenshot attached:

[ryan]

What version of the CKEditor module? Double check that ACF is enabled. When you paste stuff, only the formatting that is allowed from the advanced content filter should come through. Meaning, things like <h2>, <p> and <a> tags should come through, but things like <span class='-mso-blah-blah-blah' style='blahblahblah'> should not, unless one of the plugins is allowing it. I did a few test copy/pastes from other websites, and it is allowing more to come through than I'd like. It appears one of the plugins is allowing "style" attributes on links and some other things. Unfortunately I'm not sure what CKEditor plugin is allowing that yet. But once you hit save, the HTML Purifier module should fix those things. It sounds like you actually want some of those styles to be retained–I don't recommend this, just because it would be very difficult to maintain consistency unless you are always the editor, and inline style attributes aren't pretty from the code side. It's better to focus on marking things up properly on the back-end, and let your front-end stylesheets make them look the way you want on the front-end. But if you want to keep those styles, you probably need to use regular (not inline) mode and turn off HTML Purifier in the field settings. 

[onjegolders]

Thanks Ryan, I've just updated to the latest version of your module (which fixes the rows issue) I'll let you know if still have the same problem.

You're probably right about the styles though the real issue I had was that after the paste, the toolbar wouldn't reappear when I click back onto the textarea.

[ryan]

You're probably right about the styles though the real issue I had was that after the paste, the toolbar wouldn't reappear when I click back onto the textarea.

I wasn't able to duplicate this one. What browser? Any chance I could get a look at what you were pasting? Inline mode actually puts the contents directly in the HTML document (which is why it's called inline mode) rather than in a safely iframe'd window like regular mode. As a result, something as simple as an unmatched tag can break the entire page editor, and make it very difficult to fix–you'd have to switch back to the regular CKEditor, fix and save it, then switch back to the Inline editor. That's why something like HTML Purifier is so important in inline mode. 

[onjegolders]

Thanks Ryan,

It would've been the latest Chrome on a Mac.

The project's moved on so will be hard to replicate, interesting what you said about unmatched tags, maybe that was it. Though I'm pretty sure I had HTML Purifier enabled.

[dragan]

Just a little hint:

in config.js, you can add these lines:

config.allowedContent = true; // don't filter anything, i.e. allow custom style / classes / id etc.
config.enterMode = CKEDITOR.ENTER_P; // by default, CKEditor wraps everything in DIVs - annoying. This will wrap everything in <p> tags

 

[ryan]

Just a little hint:

 

in config.js, you can add these lines:

 

config.allowedContent = true; // don't filter anything, i.e. allow custom style / classes / id etc.

config.enterMode = CKEDITOR.ENTER_P; // by default, CKEditor wraps everything in DIVs - annoying. This will wrap everything in <p> tags

 

Just wanted to mention that neither of these are necessary. The CKEditor module already handles both of these settings. The enterMode is already hard-coded for ENTER_P. And you can disable ACF (i.e. allowedContent=true) by unchecking the "Use ACF" box in the field settings, which applies this. 

[Joe]

Just a little hint:

in config.js, you can add these lines:

config.allowedContent = true; // don't filter anything, i.e. allow custom style / classes / id etc.

Dragan, thanks for this little line of code, it helped me solve my problem described here: http://processwire.com/talk/topic/4728-getting-image-width-and-height/

Finally I got CKEditor to to use width and height attributes instead of style for img tags!

[ryan]

Joe, did you read the message above yours? You can set allowedContent with a radio button in the field settings. These's no reason to add config.allowedContent (unless you've taken over the config.js completely). 

[Joe]

Joe, did you read the message above yours? You can set allowedContent with a radio button in the field settings. These's no reason to add config.allowedContent (unless you've taken over the config.js completely). 

Thank you, Ryan! I might have seen it but not quite understood, because these settings are not there anymore in the installation I´m working on - must have removed this inadvertently. I will look at config.js to see if the cause is there.