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

[gregdc]

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 :

<h1>testtest2</h1>

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.

[gregdc]

Chrome version : 4.0.249.64 OS : Windows XP pro

[Garry Yao]

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

[gregdc]

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

[Frederico Caldeira Knabben]

We should not open a special case here as this is a strong browser issue. I've opened a ticket for it at WebKit:
​https://bugs.webkit.org/show_bug.cgi?id=34799

[gregdc]

Hello,

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 (fun.call(thisp, val, i, this))res.push(val);

}

} return res;

};

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

spans[i].parentNode.replaceChild(spans[i].firstChild,spans[i]);

}

}

[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?