#10031 closed Bug (fixed)
CKEditor injects special character in Chrome
Reported by: | Jared Cobb | Owned by: | |
---|---|---|---|
Priority: | Normal | Milestone: | |
Component: | General | Version: | 3.6.5 |
Keywords: | Blink | Cc: |
Description (last modified by )
Under a special circumstance I'm seeing that Chrome is injecting a special character (​) which is a zero width space character. I stumbled upon this while playing with the editor in our production app. But I created a jsfiddle that replicates the issue with instructions on how to reproduce in the jsfiddle example:
Edit:
- I just go to http://ckeditor.com/demo
- delete all contents
- then type some characters
- press Shift+Enter (or Enter in enter mode BR)
- and type some more characters.
Don't press Backspace or Delete when you type as this will remove ZWS. To check ZWS I use Chrome dev tools / elements tab. It is important to use Chrome because ZWS is only created when CKEDITOR.env.webkit is TRUE.
Change History (21)
comment:3 Changed 12 years ago by
comment:5 Changed 12 years ago by
I completely forgot to come back and follow up, I apologize. The issue is actually seen once we save the content. I'm using getData() to get the contents, and when it's saved into the database and rendered out we get the special character. In general, I'm doing this:
$('#submit').on('click', function() { var editor = CKEDITOR.instances['comment']; var content = editor.getData(); // save my stuff via an ajax call // now my data has special characters });
comment:7 Changed 11 years ago by
For me, this character is inserted (chrome) when an <img> is not contained within a <p>
comment:8 Changed 11 years ago by
Description: | modified (diff) |
---|---|
Keywords: | Blink added |
Status: | new → confirmed |
Version: | 4.0.1 → 3.6.5 |
comment:9 Changed 11 years ago by
Description: | modified (diff) |
---|
comment:12 follow-up: 15 Changed 11 years ago by
ZWS character itself is not a problem. However editor doesn't work as expected when ZWS is created. For example:
- start Google Chrome
- go to http://ckeditor.com/demo
- delete all contents
- then type some characters
- press Shift+Enter (or Enter in enter mode BR)
- and type some more characters
- press Ctrl+A (to select all)
- press Delete
RESULT: only part of text is deleted.
I'm not sure but this can be related to custom-data being set to element where ZWS is created. If I prevent setting custom-data then problems related to ZWS disappear.
comment:13 Changed 11 years ago by
abbuk -- can you elaborate on "If I prevent setting custom-data" please? How do you do this?
comment:14 Changed 11 years ago by
Version: | 3.6.5 → 4.5.0 (GitHub - major) |
---|
comment:15 follow-up: 17 Changed 11 years ago by
Replying to abbuk:
ZWS character itself is not a problem. However editor doesn't work as expected when ZWS is created. For example:
- start Google Chrome
- go to http://ckeditor.com/demo
- delete all contents
- then type some characters
- press Shift+Enter (or Enter in enter mode BR)
- and type some more characters
- press Ctrl+A (to select all)
- press Delete
RESULT: only part of text is deleted.
I'm not sure but this can be related to custom-data being set to element where ZWS is created. If I prevent setting custom-data then problems related to ZWS disappear.
Can you elaborate on what you mean by "prevent setting custom-data" please?
comment:16 Changed 11 years ago by
Version: | 4.5.0 (GitHub - major) → 3.6.5 |
---|
Please don't change version. This is an information for us when this issue was introduced.
comment:17 Changed 11 years ago by
Replying to jose:
Can you elaborate on what you mean by "prevent setting custom-data" please?
In this code: http://docs.ckeditor.com/source/selection.html Find the following line: element.setCustomData( 'cke-fillingChar', fillingChar ); This code sets a mark that helps ckeditor to find and delete ZWS char when a user types keys like backspace, delete and others. It seems that when a user deletes text by pressing Delete key, editor finds all cke-fillingChar instances and changes them - removes custom data and ZWS. This action happens before actual delete and changes selection/rage or may be DOM. After that ckeditor cannot properly delete text.
If you prevent ckeditor from setting custom-data this will fix the issue with selection, however this will create other problems. At the moment I just prevent ckeditor from deleting ZWS and custom-data (and remove them manually during save).
comment:18 Changed 10 years ago by
Resolution: | → fixed |
---|---|
Status: | confirmed → closed |
Existence of the ZWS filler inside the editor is not a bug (but its existence in the data is). This is a fix for a very ugly Blink's and Webkit's issues with selections in specific locations - for example inside empty inline elements or between inline elements. We create this character to make selection stick to it.
This is and ugly hack, because the bug is ugly. Unfortunately, this means that there were and perhaps still are issues. However, we managed to fix many of them recently in #12491 and perhaps in #12621 too (both 4.4.6). For instance, the issue mentioned in comment:12 is now fixed. The originally reported TC is also fixed (see http://jsfiddle.net/J669P/6/).
To sum up:
- The ZWS character is totally valid inside the editor.
- The ZWS character should never appear in the data and that issue (the original one) was fixed.
- There were other issues related to the usage of the ZWS character, but all mentioned here where fixed in 4.4.6.
comment:19 Changed 9 years ago by
This issue still exists: using editor.document.getBody().getHtml();
I get the ZWS character (E2 80 8B) in the body as a result of shift-returns. See:
comment:20 Changed 9 years ago by
Please see http://dev.ckeditor.com/ticket/14846#comment:5.
In general CKEditor inserts many helper attributes classes and tags when in wysiwyg mode. When you get HTMl you get all that but when you get data you clean all CKEditor internal helper so you should always use getData()
comment:21 Changed 9 years ago by
I understand the difference between getHtml()
and getData()
but we are using inline mode and our users are editing parts of the HTML directly (like http://ckeditor.com/demo#inline) so what is the solution in this scenario? I can remove all of the ZWS characters at the end but I'm worried I will miss other hacks that CK is using.
comment:22 Changed 9 years ago by
It's exactly the same – use editor.getData()
. If you don't create the editor using CKEDITOR.inline()
(which returns the editor instance), then check CKEDITOR.instances
.
comment:23 Changed 9 years ago by
Thank you for such a fast reply!
In my case it is a bit more complicated because CK is initialised on on a partial section of the HTML, it does not own the entire document so it's non-trivial to do this (CK instances are created/destroyed as needed dynamically). I realise this is our problem but I was wondering if there was a way to use CK's internal 'cleaning' tools on the whole HTML afterwards?
comment:24 Changed 9 years ago by
Not in a reliable way unfortunately. Most of the things should be cleaned up by the data processor (editor.dataProcessor.toData()
). 7ZWS you can clean manually (we used 7 exactly for this reason... because there were some ridiculous cases where we needed to be sure that these aren't real ZWSes) because DP may not catch them in this case. But there may be more... e.g. if your editors have different configurations, then for cleanup you'd need to use one which has all the features.
THB, I don't understand in what situation it's not possible to use getData()
immediately when destroying editor and replacing what was left after editor destruction with the editor data. If you destroy them, then it should be a small change:
var data = editor.getData(); editor.destroy(); elementWhichEditorOccupied.innerHTML = data;
comment:25 Changed 9 years ago by
I certainly should do that but the way this was written in my codebase makes it a bit tricky.
Thank you for your help!
If it's a ZWS character, then most likely we're creating it. It may be Webkit specific, because of some hack targeted for Webkit only.