Opened 14 years ago

Closed 14 years ago

Last modified 13 years ago

#5052 closed Bug (wontfix)

Apple-style-span added in Chrome when joining two lines with different styles

Reported by: gregdc Owned by:
Priority: Normal Milestone:
Component: Core : Styles Version: 3.1
Keywords: Confirmed Safari Chrome workaround apple-style-span Cc:


Here is the problem easy to reproduce :

Create one paragraph with heading1 style for example. Create a second paragraph without style. HTML source looks like this :

<h1>test</h1> <p>test2</p>

Type backspace on the first position of second paragraph. This should result in joining both paragraph with "heading1" style.

It does well in firefox,IE :


In Chrome (and maybe safari) it does not :

<h1>test<span class="Apple-style-span" style="font-weight: normal;font-size: 12px; ">test2</span></h1>

note : not an integration problem, bug reproducible also on ckeditor demo site.

Change History (6)

comment:1 Changed 14 years ago by gregdc

Chrome version : OS : Windows XP pro

comment:2 Changed 14 years ago by Garry Yao

Keywords: Confirmed Safari Chrome added; chrome style Apple-style-span removed

Managed Backspace key will be the only way to fix it.

comment:3 Changed 14 years ago by gregdc

Also the case using "delete" key on last char of first paragraph...

comment:4 Changed 14 years ago by Frederico Caldeira Knabben

Milestone: CKEditor 3.x
Resolution: wontfix
Status: newclosed

We should not open a special case here as this is a strong browser issue. I've opened a ticket for it at WebKit:

comment:5 Changed 14 years ago by gregdc

Keywords: workaround apple-style-span added


I ported a previous fix for fckeditor to ckeditor... It removes "apple-style-span" span tags from the DOM without deleting the children. Maybe not perfect but it works. This function should be called in "onSelectionChangeFixBody" function called when "selectionChange" event is fired.

just add this inside onSelectionChangeFixBody function : if (b.webkit) {fixchrome();}

Here is the function delcaration to add inside the ckeditor.js

function fixchrome() {

if (!Array.prototype.filter) {

Array.prototype.filter = function(fun /*, thisp*/) {

var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(); var thisp = arguments[1]; for (var i = 0; i < len; i++) {

if (i in this) {

var val = this[i]; if (, val, i, this))res.push(val);


} return res;


} var myf=document.getElementsByTagName("iframe"); var mysp=myf[0].contentWindow.document.getElementsByTagName('span'); var spans =,function(item){return (item.className == 'Apple-style-span');}); for ( var i = spans.length - 1 ; i >= 0 ; i-- ) {




comment:6 Changed 13 years ago by RP

A site I put together just a month ago has this same problem and I'm using the latest CKEditor. Can this fix please be integrated into the next minor update to CKEditor please?

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy