Opened 6 years ago

Closed 6 years ago

Last modified 5 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 6 years ago by gregdc

Chrome version : OS : Windows XP pro

comment:2 Changed 6 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 6 years ago by gregdc

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

comment:4 Changed 6 years ago by fredck

  • Milestone CKEditor 3.x deleted
  • Resolution set to wontfix
  • Status changed from new to closed

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 5 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 5 years ago by rajmataj

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 – 2015 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy