CKEditor and Chrome

[alan]

It appears that CKEditor on Chrome at least is able to jankily add STYLE when not asked to.

At least while editing some copy I noticed a P that looked wrong (too large) so I selected the whole line (treble click) and chose 'Normal' from the 'Format', but initially it would not switch to 'Normal' but stuck at 'Format' (not 'Normal' or 'Heading 2' etc).

I checked the source and it was

<div><span style="font-size:1.4em; line-height:1.2em">My lovely text wot I rote</span></div>

I checked Google and found this CKEditor and Chrome issue.

Does anyone know if this is likely the cause?

If this is the cause anyone know best to apply it—I am on 2.4 with the CKEditor Module (1.1.7 - latest) but under the Module folder there seems to be two config.js files: ckeditor-4.3.0. and ckeditor-4.3.2?

Thanks to any clever peeps!

Edited March 25, 2014 by alanfluff

[ryan]

Alan, you can delete the ckeditor-4.3.0 directory as that's just an old version that's no longer in the module's source code.

I recall seeing this issue in older versions when pasting copy, but haven't seen it in any recent versions. I'd be curious to know what your CKEditor settings are. Check that you've got ACF enabled in your CKE field settings, which should filter out that kind of stuff. You might also want to enable HTML Purifier as well, which would clean out that kind of stuff when the page is saved. 

I just pushed an update yesterday for a bug someone reported with our config definition to CKE and it's enterMode option, but am thinking that is probably not related to the issue you are seeing here... Still it might be worth testing out hte new version 1.1.8 just in case. 

[alan]

Thanks Ryan; I checked and both ACF and HTML purifier were enabled.

I'm puzzled how that (DIV) happened. I *was* pasting from Word but knowing what a pile-o-vomit Word is made from under the hood I am 99.9% sure I pasted to my go-to plain text app, as I invariably do, and then copy/pasted from there. Also I am puzzled as I am pretty sure when I used the CKEditor button 'Source' to see what was there, the first time(s) it showed a P with a SPAN with inline style (not the DIV?). Weird.

In case relevant, I'm using the inline CKEditor and your/the super-nice Customer Editor JS styles and CSS file.

I'll watch for it happening again and see if I can spot anything more.

And tks re the tip re deleting old 4.3.0.

[alan]

Wrong place to note this probably but I also noticed IMG tags are P wrapped (which has me questioning the best semantics...) but assuming I don't want IMGs P wrapped (like here) and assuming I find a CKEditor setting to stop this (one of these maybe), is there a place in PW I can go add a config setting to change CKEditor (I am hoping in .../templates/... somewhere so it's safe from Module updates)?

In case relevant I already use these two custom locations to get CKEditor to do lovely things in inline mode in PW:

cc-styles-CKEditor:/site/templates/scripts/InputfieldCKEditor/cc-styles-CKEditor.js
and
/site/templates/styles/InputfieldCKEditor/cc-styles-CKEditor-inline.css

Tks lots for any pointers!

Edit: For now, finding instances of [P IMG /P] with this and dragging them up with CSS to stop the wrapping P making the IMG look too low.

Edited March 25, 2014 by alanfluff

[alan]

A new Chrome + CKEditor bug (new to me) it seems. I certainly am seeing random SPANs with inline styles added to copy under some circumstances

That previous link plus this link to Drupal seem like they may fix it, off to go and see if they do...

Edit: OK, probably not going to follow the Drupal instructions since they probably refer to a Drupal system off to check here for how to add a CKEditor plugin...

Not found how to enable/use this plugin so I have just installed it and am assuming it will be auto-detected and used. We'll see...

Edited May 28, 2014 by alanfluff