[CKEditor Dev] #10031: CKEditor injects special character in Chrome

CKEditor

unread,

Feb 4, 2013, 6:05:08 PM2/4/13

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome
-----------------------+-------------------
Reporter: jaredcobb | Type: Bug
Status: new | Priority: Normal
Component: General | Version: 4.0.1
Keywords: |
-----------------------+-------------------
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:

http://jsfiddle.net/J669P/1/

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031>
CKEditor <http://ckeditor.com/>
The text editor for the Internet

CKEditor

unread,

Feb 5, 2013, 8:16:25 AM2/5/13

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

* status: new => pending
* version: 4.0.1 =>

Comment:

It is not possible to open your jsfiddle. Could you please attach reduced
test case file showing the problem. I would have to do it anyway.

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:1>

CKEditor

unread,

Feb 5, 2013, 8:42:13 AM2/5/13

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by j.swiderski):

To reproduce:
- Open Ajax sample
- Place cursor into editor
- Click bullets
- Type Command-I (to italicize)
- Type some text
- Hit enter twice to exit from unordered list
- Type some more text
- click or don't click destroy and inspect the HTML content (in page or
editor). Notice special character  being put into the content

@jaredcobb yes you are right Chrome puts some character into HTML code but
I have checked this with (Execute in Console)
{{{CKEDITOR.instances.editor1.getData();}}} and {{{getSnapshot()}}}
methods and there is no such character so it seems to me that there is no
bug as editor filters this character.

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:2>

CKEditor

unread,

Feb 5, 2013, 9:33:29 AM2/5/13

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by Reinmar):

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.

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:3>

CKEditor

unread,

Feb 6, 2013, 8:42:33 AM2/6/13

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by j.swiderski):

@Reinmar I have checked this in plain contenteditable. Character was there
as well. It seems that Webkit is inserting it (like FF its brs).

@jaredcobb could you tell us what problem does this cause for you?[[BR]]
Perhaps you aren't using getData() method to get editor contents? Is this
correct?

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:4>

CKEditor

unread,

Mar 1, 2013, 3:57:24 PM3/1/13

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by jaredcobb):

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
});
}}}

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:5>

CKEditor

unread,

Mar 4, 2013, 6:27:01 AM3/4/13

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

------------------------+-----------------------
Reporter: jaredcobb | Owner:
Type: Bug | Status: confirmed
Priority: Normal | Milestone:
Component: General | Version: 3.5.3
Resolution: | Keywords:
------------------------+-----------------------
Changes (by j.swiderski):

* status: new => confirmed
* version: 4.0.1 => 3.5.3

Comment:

To reproduce:
- Open Ajax sample
- Place cursor into editor
- Click bullets

- Type Command-I or Ctrl+I (to italicize)

- Type some text
- Hit enter twice to exit from unordered list
- Type some more text
- click or don't click destroy and inspect the HTML content (in page or
editor). Notice special character  being put into the content

1. Problem can be reproduced from CKEditor 3.5.3 rev. [6618]. Please note
that applying styles to collapsed selection was introduced in [6461]. From
this revision till [6617] it was not possible to exit lists with enter.
Revision [6618] seems to fix exiting but introduces this extra character.
2. This happens in Chrome only
3. This doesn't happen in plain contenteditable div

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:6>

CKEditor

unread,

Apr 22, 2014, 12:01:50 PM4/22/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by gerbus):

For me, this character is inserted (chrome) when an <img> is not contained
within a <p>

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:7>

CKEditor

unread,

May 19, 2014, 7:56:03 AM5/19/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

------------------------+---------------------
Reporter: jaredcobb | Owner:
Type: Bug | Status: pending

Priority: Normal | Milestone:
Component: General | Version: 3.5.3
Resolution: | Keywords:
------------------------+---------------------

Changes (by j.swiderski):

* status: confirmed => pending

Comment:

I wasn't able to reproduce this problem starting from CKEditor 4.2. Can
anyone confirm it?

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:8>

CKEditor

unread,

May 26, 2014, 6:54:57 AM5/26/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

------------------------+-----------------------
Reporter: jaredcobb | Owner:
Type: Bug | Status: confirmed
Priority: Normal | Milestone:
Component: General | Version: 3.6.5
Resolution: | Keywords: Blink
------------------------+-----------------------
Changes (by j.swiderski):

* keywords: => Blink

* status: new => confirmed

* version: 4.0.1 => 3.6.5

Old description:

> 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:
>
> http://jsfiddle.net/J669P/1/

New description:

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:

http://jsfiddle.net/J669P/1/

----
**Edit:**
I just go to http://ckeditor.com/demo
delete all contents
then type some characters
press Shift+Enter
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.

--

Comment:

Problem can be reproduced in Blink from CKEditor 3.6.5 rev. [7633] which
was a fix for rev. [7624].

NOTE: I wasn't able to reproduce this problem in any Safari

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:8>

CKEditor

unread,

May 26, 2014, 6:56:10 AM5/26/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Description changed by j.swiderski:

Old description:

> 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:
>
> http://jsfiddle.net/J669P/1/
>

> ----
> **Edit:**
> I just go to http://ckeditor.com/demo
> delete all contents
> then type some characters
> press Shift+Enter
> 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.

New description:

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:

http://jsfiddle.net/J669P/1/

----
**Edit:**
1. I just go to http://ckeditor.com/demo
2. delete all contents
3. then type some characters
4. press Shift+Enter
5. 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.

--

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:9>

CKEditor

unread,

May 26, 2014, 7:01:37 AM5/26/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Old description:

> 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:
>
> http://jsfiddle.net/J669P/1/
>

> ----
> **Edit:**
> 1. I just go to http://ckeditor.com/demo
> 2. delete all contents
> 3. then type some characters
> 4. press Shift+Enter
> 5. 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.

New description:

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:

http://jsfiddle.net/J669P/1/

----

**Edit:**
1. I just go to http://ckeditor.com/demo
2. delete all contents
3. then type some characters

4. press Shift+Enter (or Enter in enter mode BR)

5. 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.

--

Comment (by j.swiderski):

#11545 was marked as duplicate.

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:10>

CKEditor

unread,

May 26, 2014, 7:04:09 AM5/26/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by j.swiderski):

#11545 was marked as duplicate.

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:11>

CKEditor

unread,

May 29, 2014, 1:27:14 AM5/29/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by abbuk):

ZWS character itself is not a problem. However editor doesn't work as
expected when ZWS is created. For example:

0. start Google Chrome
1. go to http://ckeditor.com/demo

2. delete all contents
3. then type some characters
4. press Shift+Enter (or Enter in enter mode BR)
5. and type some more characters

6. press Ctrl+A (to select all)
7. 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.

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:12>

CKEditor

unread,

Jul 2, 2014, 6:13:11 AM7/2/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by jose):

abbuk -- can you elaborate on "If I prevent setting custom-data" please?
How do you do this?

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:13>

CKEditor

unread,

Jul 2, 2014, 6:13:35 AM7/2/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

------------------------+------------------------------------

Reporter: jaredcobb | Owner:
Type: Bug | Status: confirmed
Priority: Normal | Milestone:

Component: General | Version: 4.5.0 (GitHub - major)
Resolution: | Keywords: Blink
------------------------+------------------------------------
Changes (by jose):

* version: 3.6.5 => 4.5.0 (GitHub - major)

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:14>

CKEditor

unread,

Jul 2, 2014, 6:16:45 AM7/2/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

------------------------+------------------------------------
Reporter: jaredcobb | Owner:
Type: Bug | Status: confirmed
Priority: Normal | Milestone:
Component: General | Version: 4.5.0 (GitHub - major)
Resolution: | Keywords: Blink
------------------------+------------------------------------

Comment (by jose):

Replying to [comment:12 abbuk]:

> ZWS character itself is not a problem. However editor doesn't work as
expected when ZWS is created. For example:
>
> 0. start Google Chrome
> 1. go to http://ckeditor.com/demo
> 2. delete all contents
> 3. then type some characters
> 4. press Shift+Enter (or Enter in enter mode BR)
> 5. and type some more characters
> 6. press Ctrl+A (to select all)
> 7. 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?

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:15>

CKEditor

unread,

Jul 2, 2014, 6:42:38 AM7/2/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

------------------------+-----------------------

Reporter: jaredcobb | Owner:
Type: Bug | Status: confirmed
Priority: Normal | Milestone:

Component: General | Version: 3.6.5
Resolution: | Keywords: Blink
------------------------+-----------------------

Changes (by Reinmar):

* version: 4.5.0 (GitHub - major) => 3.6.5

Comment:

Please don't change version. This is an information for us when this issue
was introduced.

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:16>

CKEditor

unread,

Jul 2, 2014, 3:25:56 PM7/2/14

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by abbuk):

Replying to [comment:15 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).

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:17>

CKEditor

unread,

Jan 14, 2015, 8:33:57 AM1/14/15

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

------------------------+--------------------
Reporter: jaredcobb | Owner:
Type: Bug | Status: closed

Priority: Normal | Milestone:
Component: General | Version: 3.6.5

Resolution: fixed | Keywords: Blink
------------------------+--------------------
Changes (by Reinmar):

* status: confirmed => closed
* resolution: => fixed

Comment:

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:

1. The ZWS character is totally valid inside the editor.
2. The ZWS character should never appear in the data and that issue (the
original one) was fixed.
3. There were other issues related to the usage of the ZWS character, but
all mentioned here where fixed in 4.4.6.

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:18>

CKEditor

unread,

Sep 9, 2016, 5:01:42 PM9/9/16

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by VernJensen):

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:

http://dev.ckeditor.com/ticket/14846#comment:1

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:19>

CKEditor

unread,

Sep 12, 2016, 5:57:26 AM9/12/16

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by j.swiderski):

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()}}}

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:20>

CKEditor

unread,

Sep 22, 2016, 5:34:59 AM9/22/16

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by OrganicPanda):

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.

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:21>

CKEditor

unread,

Sep 22, 2016, 6:24:56 AM9/22/16

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by Reinmar):

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`.

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:22>

CKEditor

unread,

Sep 22, 2016, 11:16:55 AM9/22/16

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by OrganicPanda):

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?

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:23>

CKEditor

unread,

Sep 23, 2016, 3:41:10 AM9/23/16

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome

Comment (by Reinmar):

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;
```

--
Ticket URL: <http://dev.ckeditor.com/ticket/10031#comment:24>

CKEditor

unread,

Sep 23, 2016, 10:05:59 AM9/23/16

to ckeditor...@googlegroups.com

#10031: CKEditor injects special character in Chrome
------------------------+--------------------
Reporter: jaredcobb | Owner:
Type: Bug | Status: closed
Priority: Normal | Milestone:
Component: General | Version: 3.6.5
Resolution: fixed | Keywords: Blink
------------------------+--------------------

Comment (by OrganicPanda):

I certainly should do that but the way this was written in my codebase
makes it a bit tricky.