Module: CKEditor

[apeisa]

Ah, sorry. I misunderstood the anchor button with link button. Anchor seems to be broken. Hard to tell which could cause it (maybe some dependency with link tool, that we have replaced... or something). I try to figure.

[Alessio Dal Bianco]

I all!

I have noticed that the number of rows is ignored. What i am missing ?

USSliberty

PS: I'm using PW 2.3.0

Edited May 17, 2013 by Alessio Dal Bianco

[thetuningspoon]

Just got around to trying this out. I'm probably going to switch over permanently just on account of the fact that it actually gives you formatted code in the source editor instead of compressing everything into one unreadable glob like TinyMCE does. (What's worse is the TinyMCE devs don't seem to be willing to acknowledge this as a problem).

I did discover that I had to edit the config.js file and add the line below if I wanted CSS classes and other such things to show up in the source:

CKEDITOR.editorConfig = function( config ) {
	CKEDITOR.config.allowedContent = true;
};

Now it works great (except for the Anchor button!) 

Edit: I am also having problems getting the row number value to do anything.

[adrian]

If you do want to stay with TinyMCE there is a plugin to take care of formatting code in the editor:

https://github.com/tinymce-plugins/codemagic

[Soma]

Codemagic is even in the core tinymce plugins in PW. Just have to add it in the field configuration. It even has hightlighting and search replace and autocomplete.

[adrian]

True - forgot about that - thanks for clarifying Soma!

[antknight]

I would quite like the ability to set table max-width to 100% so it doesn't spill outside the div. Even if I set max-width: 100%!important it doesn't override the inline style.

[thetuningspoon]

Thanks Adrian & Soma. I will definitely look into that. Wish I had known about it sooner!

Edit: Hmmm, I feel kind of stupid for having to ask this, but... How do I enable the Codemagic plugin? Do I have to add a separate button to the toolbar, and does it go under "third party" or just the standard plugins?

Edit 2: Alright, I figured it out through trial & error  Add "codemagic" to the list of plugins (not third party) and then add "codemagic" to the toolbar.

[ryan]

I would quite like the ability to set table max-width to 100% so it doesn't spill outside the div. Even if I set max-width: 100%!important it doesn't override the inline style.

I'm not really sure about this one. What inline styles are on the table? I'd probably prefer not to have any inline styles there. But tables don't always obey the rules. If the content is larger than what the table can contain, I think browsers may not always be consistent in how they handle the situation regardless of what styles are applied. 

[Marty Walker]

One thing I've just noticed with this CKEditor is that curly quotes don't work (for me at least) even when I have SmartyPants Typographer. If I switch my body field back to TinyMCE and resave my page I get curly quotes. No big deal but just thought I'd mention it.

[ryan]

Curly quotes are working for me here at least. Though I do have to type them in as “usual” – option-[ and option-shift-[, or paste them in. Anyone else able to reproduce? Are you sure it's not just a typeface style (or lack of it?). For example, the quotes I entered around the work “usual” above are curly quotes in the editor here, but apparently the font the forum uses to render them uses the same glyph for both open and close quotes, making it appear they aren't curly quotes.

[antknight]

I'm not really sure about this one. What inline styles are on the table? I'd probably prefer not to have any inline styles there. But tables don't always obey the rules. If the content is larger than what the table can contain, I think browsers may not always be consistent in how they handle the situation regardless of what styles are applied. 

I was able to override the inline style by using :

table[style] {
	width: 100% !important;
}

[teppo]

I have noticed that the number of rows is ignored. What i am missing ?

Did anyone find a solution for this? Having same issue and it's kind of a bugger.. I find myself constantly dragging CKEditor windows larger

[ryan]

I think it can be set with CSS, but CKEditor apparently doesn't take the <textarea> rows attribute into account. We may be able to approximate it in the module initialization. I mainly use the inline mode with CKEditor, which always makes the height of the editor the same as the height of the content within it. 

[diogo]

Speaking of inline mode, I also prefer to use it in the admin, but you can't use custom styles with it 

This option is only available in regular editor mode.

For instance, I want all the images inside the editor to have a max-width of 200px so they work as thumbnails. With regular mode i would define a css file from the field settings, but, as I told, this is not possible in inline mode. So, how to overcome this limitation? In the admin theme

.InputfieldCKEditorInline img{
    max-width:200px;
}

Not the perfect solution, but it works.

[teppo]

@Ryan: any chance that you could add an option for setting HTMLPurifier HTML.Allowed?

Inline mode is way more usable than regular editor (partly because annoyingly tiny CKEditor windows, but for other reasons too) -- only problem there is that I can't really use it as it keeps stripping tags and attributes I really need

At first I thought this should be a setting of HTMLPurifier, but perhaps a CKEditor setting makes more sense. HTMLPurifier already supports setting config options, it's just that there's no way to do it right now in CKEditor without hacking it's processInput() method.

Another issue, though this may be more about HTMLPurifier than CKEditor, is that stuff like HTML5 elements and data attributes can't be allowed this easily; they would have to be added as custom attributes and elements, one by one. No wildcards supported here. I don't know if there's really a sensible way to implement a setting for these, though.

(As for real world usage example, pbckcode plugin which I use both to edit code and add simple metadata (such as language) uses data-attributes. Luckily it also adds classes, which can be allowed via HTML.Allowed, so problem is mostly fixed with that.)

Edit: forgot to add that in addition to HTML.Allowed, CKEditor allowedContent setting needs to be set too. Otherwise content is saved properly but parts of it might get removed when activating the editor, which isn't very nice

Annoying thing is that the format for allowed content seems different in CKEditor and HTMLPurifier. I might be completely off the track here though -- while testing this I simply disabled whole CKEditor allowedContent filter by setting it to "true".

[ryan]

What attributes are getting stripped that you need? (other than data attributes). HTML Purifier seems to allow class attributes by default (not to mention style attributes too), so it wouldn't be the one stripping those. My understanding is that the default filters in HTMLPurifier are primarily aimed at cleaning the HTML to make it safe (i.e. removing any attributes that could introduce javascript/XSS). So things like class/style attributes don't seem to be a concern to HTML Purifier, but data-* attributes probably would. But the content filters in HTMLPurifier and CKEditor seem to have different purposes. 

I've been experimenting here with adding the 'extraAllowedContent' option (rather than 'allowedContent') to the CKEditor module, as it seems like this is the one designed for modifying the default behavior? (not positive on that). Though I've found the allowedContent rules string to be a little unpredictable. For instance, an extraAllowedContent string of "p[class]" should mean "Allow <p> elements with optional class attribute." But that doesn't seem to work. I can't get CKEditor to allow class attributes that way unless I manually specify the class name, like "p(test)" to allow a <p class="test"></p>

Just pushed this update to CKEditor, so you should have the extraAllowedContent filter available. Let me know what else we need. 

[diogo]

Ryan, since some of us are using the inline mode on admin pages, wouldn't it make sense that the purifier is not required at all? Maybe mentioning it on the field options would be enough.

[teppo]

What attributes are getting stripped that you need? (other than data attributes). HTML Purifier seems to allow class attributes by default (not to mention style attributes too), so it wouldn't be the one stripping those.

That's odd. The plugin I mentioned (pbckcode) adds classes to pre elements and those were definitely removed by HTML Purifier; right before purify() they existed, right after it they were gone (did a var_dump() before and after to make sure.)

I might have to double-check this to be sure though, as I've been using customized CKEditor module since then.

My understanding is that the default filters in HTMLPurifier are primarily aimed at cleaning the HTML to make it safe (i.e. removing any attributes that could introduce javascript/XSS). So things like class/style attributes don't seem to be a concern to HTML Purifier, but data-* attributes probably would.

You're probably right. It acting overly zealous was probably just because of my admittedly uncommon use case

With data-* attributes (and HTML5 elements) problem is simply that HTML Purifier only allows tags / attributes it already recognizes and since there' no HTML5 support built-in it removes all those. Whitelist instead of blacklist or some kind of heuristics probably makes sense, but it can feel rather stiff at times.

I've been experimenting here with adding the 'extraAllowedContent' option (rather than 'allowedContent') to the CKEditor module, as it seems like this is the one designed for modifying the default behavior? (not positive on that). Though I've found the allowedContent rules string to be a little unpredictable. For instance, an extraAllowedContent string of "p[class]" should mean "Allow <p> elements with optional class attribute." But that doesn't seem to work. I can't get CKEditor to allow class attributes that way unless I manually specify the class name, like "p(test)" to allow a <p class="test"></p>

Just pushed this update to CKEditor, so you should have the extraAllowedContent filter available. Let me know what else we need.

Thanks, I'll try this out

[ryan]

Just testing out HTML purifier with a /test.php in my webroot: 

<?php
include("./index.php");
$purifier = wire('modules')->get('MarkupHTMLPurifier');
$text = "<pre class='test' onclick='alert(1)'>Test</pre><script>alert(2)</script>";
$text = $purifier->purify($text);
echo htmlentities($text); 

Result:

<pre class="test">Test</pre>

I have a feeling it's CKEditor that's stripping out your <pre> class attribute. Try adding "pre[class]" or "pre[*]" or "*[*]" to your extraAllowedContent rules in the latest CKEditor inputfield to see if that corrects it?

[teppo]

@Ryan: looks like I made a mistake somewhere; can't repeat my earlier results either. It definitely looks like it was CKEditor that kept stripping that class after all.

This time I'm having problems with extraAllowedContent though -- it doesn't seem to affect anything no matter what I do; tried all the examples you posted and nothing works. Right after adding "allowedContent => true" class stays, but without that it disappears as soon as the field gets focus.

Any idea what could be causing this?

Edit: extraAllowedContent is definitely sent to CKEditor. At the moment that specific editor instance has editor.config.extraAllowedContent set to "pre[class]", but still for some reason class is removed. Strange.

Edit 2: Got it.. pre[class] isn't enough, it needs to be pre[class](*). It's working now

Edited July 14, 2013 by teppo

[ryan]

Edit 2: Got it.. pre[class] isn't enough, it needs to be pre[class](*). It's working now

Glad you got it! I'll have to remember that one too. No doubt these CKEditor 4.1+'s ACF system is a mixed blessing. On the whole, I'm glad to have it (especially with clients that like to copy/paste from Word, etc.) but I can see it being a real bear when trying to do something out of the norm. I've gone ahead and updated the CKEditor version so that it now supports options for:

• Enable ACF (Advanced Content Filter)? [Yes/No] (default=Yes)
• Enable HTML Purifier? [Yes/No] (default=Yes, if installed)

When upgrading to this version, revisit all your textarea fields using CKEditor in Setup > Fields, and see the new options on the Input tab. Hit save, even if you don't change anything, just to commit the new settings. 

[maba]

Someone has this problem after the CKEditor update?

Error:
Call to a member function set() on a non-object (line 118 of /home/.../site/modules/MarkupHTMLPurifier/MarkupHTMLPurifier.module)

When I enable HTML Purifier I cannot save pages that have a CKEditor field..

Ryan test works, so I believe that HTML Purifier works.. 

Thanks

[maba]

Tried the update with another installation.. works.

Other common issue issue is the white are around text: not highlighted and doesn't fill the dashed area (Teflon theme).

[ryan]

Check to make sure you have the latest version of MarkupHTMLPurifier. Based on the error message, I'm guessing you don't?