Opened 9 years ago

Last modified 3 years ago

#7352 confirmed Bug

Single quotes in attributes converted to double quotes

Reported by: Marcel Owned by:
Priority: Normal Milestone:
Component: Core : Output Data Version: 3.1.1
Keywords: IE Cc:

Description (last modified by Jakub Ś)

When using single quotes in html attributes they somehow get converted to double quotes and then htmlencoded to "

In my case this happens when I try to do this in the code view:

<a href="URL" style="font-family: 'Trebuchet MS';">Link</a>

Switch back to normal view and to code again, and CKEditor transformed it into this:

<a href="URL" style="font-family: &quot;Trebuchet MS&quot;;">Link</a>

Not quite the desired result.

Is there a hotfix for this or do I have to wait for it to get fixed? (couldn't find it on Google)


Edit:

I did some checking. Here are the results:

  • IE9 and IE10 - change ' character to &quot;
  • IE6-IE8 - delete the ' character
  • Webkit, Opera and Firefox leave the ' character untouched.

Since editor 4.x is creating HTML from scratch in some places perhaps it should introduce "template behaviour" in which " goes outside and ' goes inside (or something like that).

Change History (10)

comment:1 Changed 9 years ago by Marcel

Forgot to mention: It only happens in IE9

comment:2 Changed 9 years ago by Jakub Ś

Keywords: IE9 added; single quotes attribute converted double quotes removed
Status: newconfirmed
Version: 3.5.23.1.1

<a href="URL" style="font-family: 'Trebuchet MS';">Link</a>

From version 3.1.1 in IE9 the above example is changed by CKEditor to: <a href="URL" style="font-family: &quot;trebuchet ms&quot;;">Link</a>

Till version 3.1 (inclusive) the example is changed in IE7, IE8 and IE9 to : <a href="URL" style="font-family: ;" trebuchet="">Link</a>

comment:3 Changed 7 years ago by Jakub Ś

Description: modified (diff)
Keywords: IE added; IE9 removed

Another TC:

<div style="background-image:url('http://b.cksource.com/a/1/10th/ckeditor10years.png');">Test</div>

gets changed to (IE( and IE10)

<div style="background-image: url(&quot;http://b.cksource.com/a/1/10th/ckeditor10years.png&quot;);">Test</div>

or to (IE8 and IE7)

<div style="background-image: url(http://b.cksource.com/a/1/10th/ckeditor10years.png);">Test</div>

comment:4 Changed 7 years ago by Jakub Ś

#7617 was marked as duplicate.

comment:5 Changed 7 years ago by Jakub Ś

#8373 was marked as duplicate

comment:6 Changed 7 years ago by Jakub Ś

#10342 was marked as duplicate.

comment:7 Changed 7 years ago by Jakub Ś

Please also note that I have set version 3.1.1 because it haven't worked at all before 3.1.1 (TC is reproducible since that version).

comment:8 Changed 5 years ago by Guest

I am also facing similar issue where input is <span style='font-family:"Arial","sans-serif"'>

and this get converted to <span style="font-family:&quot;Arial&quot;,&quot;sans-serif&quot;">

Can you please let me know if this is fixed as this causes issues like font not getting applied after data is sent from ckeditor? I am using version 4.4.1

comment:9 Changed 4 years ago by Jakub Ś

Please try below code on any page used without the editor (tested in IE11):

<div id="test_editable" style="margin:20px; border:1px solid black; width:500px;" contenteditable="true">
	<h2>IE changes ' into &amp;quot&#59; or adds &amp;quot&#59;</h2>
	<div class="img" id="plan_sp_shop" style="background-image: url('http://icons.iconarchive.com/icons/custom-icon-design/mini-3/48/test-paper-icon.png');">test</div>
	<div class="img" id="plan_sp_shop" style="background-image: url(http://icons.iconarchive.com/icons/custom-icon-design/mini-3/48/test-paper-icon.png);">test2</div>
	<div style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==')">test3</div>
	<a href="URL" style="font-family: 'Trebuchet MS';">Link</a>
</div>
<script>console.log(document.getElementById('test_editable').innerHTML);</script>

It seems that IE browsers wrap around value of background-image url as well as value of font-family (if it is paced inside quotes) in double quotes.

CKEditor gets uch code and encoded inner quotes to entities. Thus the result. Although it is not desired it works as expected. Browser handle correctly encoded quotes.
At the same time I understand that having encoded and not encoded content may lead to problems thus of some way of overcoming this.

Perhaps a solution would be inverting quotes quotes in IE for such cases e.g. <a href="URL" style="font-family: 'Trebuchet MS';">Link</a> (IIRC currently editor is forcing double quotes for attribute value)?

This feature of IE causes problem in our code - #12458.

comment:10 Changed 3 years ago by Jakub Ś

Same thing can be reproduced in IE10-11 in CKEditor 4.x

#14740 was marked as duplicate.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy