insertHtml in Chrome strips 'span' element

[Kevin]

Using the 'API' sample provided with the editor source (or on the nightly build page e.g. ​http://nightly.ckeditor.com/7490/_samples/api.html), attempt to insert the following HTML in the middle of the document text, e.g. just after the word 'This': <span>{</span>

Using Chrome (latest version 19.0.1084.52 at time of writing), only the '{' is inserted. With IE and Firefox, the opening and closing 'span' tags are correctly inserted.

Obviously this could easily be a probably with Chrome rather than with CKEditor itself, though either way, any leads on a workaround would be very helpful.

[Jakub Ś]

Reproducible from CKEditor 3.0 in Webkit browsers.

This not just about '{' sign but any text that is placed in span tags.

1. If you insert <span>anything</span> into line with text span will get stripped
2. If you insert <span>anything</span> in new line where there is no text - span will be inserted as well.

[Piotrek Koszuliński]

I confirm that this is a Chrome's behaviour, not a CKEditor bug. Chrome very brutally adds span with styles when you copy a content and then, when you paste it, it preserves only these styles which differs from the content origin. And pasting operation is very similar to insertHTML command.

In this case, when you insert empty (unstyled) span Chrome probably thinks that this is its span, sees no differences in styles so it removes this element completely :|.

So the simplest solution is - use some random style for span you're inserting and remove it after insertion. You can use some random id to find this span later. Unfortunately, I couldn't find simpler solution - other than style attributes don't help.

I can also say, that this behaviour is already fixed in the dev version (not available on SVN) of CKEditor - this patch will be part of new major version release.

[Kevin]

Unfortunately, while the workaround can be used to ensure a span exists, it doesn't allow us to do what we really need - add a class. If the following text is used on the test page (e.g. at ​http://nightly.ckeditor.com/7514/_samples/api.html):

<span style='color:#abcdef' class='testclass' id='testid'>fkf</span>

then a span gets inserted with a 'style' attrib, but no class, and no id, so no way to find the span by id to add the class manually afterwards ... We even tried setting background-color instead then searching for the span with that background-color afterwards (like at ​http://stackoverflow.com/questions/282198/selecting-elements-with-a-certain-background-color) - works with IE, not with Chrome!

Any suggestions appreciated if we're missing something ... essentially, if we could tell where in the document the cursor is (i.e. where the insertHTML is going to take effect), we could probably insert the markup ourselves - but it doesn't seem as if the ckeditor api allows for that, and of course, insertHTML would be preferable/cleaner, if it weren't for the Chrome problems ...

[Piotrek Koszuliński]

I can definitely say that inserting markup manually will be a pain. Huge pain :) >1k LOC + Nk LOC of tests ;). I know, because I implemented this.

I checked that inserting other than span element works correctly. So you can insert e.g. strong, then find it by your special class, replace with span and use element#copyAttributes and element#moveChildren to finalize the replacement.

[Kevin]

That's a great idea. We did something like that with 'strong', and it works fine. Thanks.

[Vittal Aithal]

I had the same problem (Chrome 20.0.1132.57, CKeditor 3.6.6) and worked around it by using insertElement, rather than insertHtml:

e.g.

editor.insertHtml( '<span class="cg_ckeditor_field" rel="cognidox:type:partnum">CogniDox Document Part Number</span>' ); /* fails */

editor.insertElement( CKEDITOR.dom.element.createFromHtml( '<span class="cg_ckeditor_field" rel="cognidox:type:partnum">CogniDox Document Part Number</span>' ) ); /* works */

[Piotrek Koszuliński]

Fixed in CKEditor 4.0 beta.