Opened 13 years ago
Closed 11 years ago
#9004 closed Bug (fixed)
insertHtml in Chrome strips 'span' element
Reported by: | Kevin | Owned by: | |
---|---|---|---|
Priority: | Normal | Milestone: | |
Component: | General | Version: | 3.0 |
Keywords: | Webkit | Cc: |
Description
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.
Change History (7)
comment:1 Changed 13 years ago by
Keywords: | Webkit added |
---|---|
Status: | new → confirmed |
Version: | → 3.0 |
comment:2 Changed 12 years ago by
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.
comment:3 Changed 12 years ago by
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 ...
comment:4 Changed 12 years ago by
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.
comment:5 Changed 12 years ago by
That's a great idea. We did something like that with 'strong', and it works fine. Thanks.
comment:6 Changed 12 years ago by
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 */
comment:7 Changed 11 years ago by
Resolution: | → fixed |
---|---|
Status: | confirmed → closed |
Fixed in CKEditor 4.0 beta.
Reproducible from CKEditor 3.0 in Webkit browsers.
This not just about
'{'
sign but any text that is placed in span tags.<span>anything</span>
into line with text span will get stripped<span>anything</span>
in new line where there is no text - span will be inserted as well.