Font Size and Bold/Italic/Underline create multiple spans

[Donald Hanson]

Using the following configuration:

config.coreStyles_bold = { element: 'span', styles: { 'font-weight' : 'bold' } };
config.coreStyles_italic = { element: 'span', styles: { 'font-style' : 'italic' } };
config.coreStyles_underline = { element: 'span', styles: { 'text-decoration' : 'underline' } };

Start with this content:

<p>Test Line</p>

Highlight the text and mark it bold produces this expected content:

<p><span style="font-weight:bold;">Test Line</span></p>

Highlight the text and change the font size produces this unexpected content:

<p><span style="font-size:48pt;"><span style="font-weight: bold;">Test Line</span></span></p>

Expected content:

<p><span style="font-size: 48pt; font-weight: bold;">Test Line</span></p>

This is an issue for us because the resulting content from the editor is displayed in a page with the following css file:

*
{
    font-family: Arial, Helvetica, Verdana;
    font-size:8pt;
}

This causes the inner bold span tag to always force the font size to 8pt.

Leaving the config coreStyles set to the default also produces a similar issue because the bold span is simply replaced with a strong tag.

<p><span style="font-size:48pt;"><strong>Test Line</strong></span></p>

[Jakub Ś]

Problem has been reproducible in CKEditor 3.0 and also in CKEditor 4.x.

I'm guessing that having different tags is fine when there are actually different tags inserted - em, strong, u. When dealing with spans IMHO CKEditor should work on attributes in style attribute.

This issue is probably related to #8686 and #8369.

[Jakub Ś]

#2203 was marked as duplicate.

[liujunhao]

This problem maybe affected by 'mergeSiblings' function .I tried lots of times ,it never run 'moveChildren' funtion.Please help me.Thank u foward.

[liujunhao]

You can replace the function mergeSiblings with this code. mergeSiblings: (function() {

myself code start

var tempnode; for(var tttt in j){

tempnode = j[tttt];get the span node

break;

} var tempnodecss = tempnode.style.cssText;get span node style var list = tempnode.childNodes;get this node's children var tempContent; for(var kkkkk in list){

if(list[kkkkk].tagName !=null && list[kkkkk].tagName !="")

if(list[kkkkk].tagName.toLowerCase()=='span'){if the node is span ,then combine it

var nodecss = list[kkkkk].style.cssText; if(nodecss.indexOf("display")<0){if the sytle attribute is display ,continue

tempnodecss = tempnodecss+nodecss; list[kkkkk].removeAttribute("style");remove the style

}

}

} tempnode.style.cssText = tempnodecss;set node style var tempcontent = tempnode.innerHTML;get node innerHtml var regExp = new RegExp("<span>","gi");for replace <span> var regSpanEnd = new RegExp(">naps
/<");for replace</span> var reglist = tempcontent.match(regExp);get <span> tempcontent= tempcontent.replace(regExp,"");for remove <span> for(var count in reglist){

var reverseStr="";temp reverse node innerHtml

reverse start for(var iiii=0;iiii<tempcontent.length;iiii++){

reverseStr+=tempcontent.charAt(tempcontent.length-iiii);

} reverseStr+=tempcontent.charAt(0); reverse end reverseStr=reverseStr.replace(regSpanEnd,"");remove </span> tempcontent=""; reverse again start for(var iiii=0;iiii<reverseStr.length;iiii++){

tempcontent+=reverseStr.charAt(reverseStr.length-iiii);

} tempcontent+=reverseStr.charAt(0); reverse again end

} tempnode.innerHTML = tempcontent;set node innerHtml

myself code end

function i(j, k, l) {

if (k && k.type == 1) {

var m = [];

while (k.data('cke-bookmark')

k.isEmptyInlineRemoveable()) {

m.push(k); k = l ? k.getNext() : k.getPrevious();

if (!k

k.type != 1) return;

} if (j.isIdentical(k)) {

var n = l ? j.getLast() : j.getFirst(); while (m.length) m.shift().move(j, !l); k.moveChildren(j, !l); k.remove(); if (n && n.type == 1) n.mergeSiblings();

}

}

}; return function(j) {

var k = this;

if (! (j === false

f.$removeEmpty[k.getName()]

k.is('a'))) return;

i(k, k.getNext(), true); i(k, k.getPrevious());

};

})(),

[ganbin]

This problem still actual with the version 4 of CKEditor.

We should have a way to merge the style into only one span. Why the dataProcessor can't do it?

P.S. : the part of code here is pretty hard to adapt to the actual code, and, at the end, it doesn't work as expected.

[Piotrek Koszuliński]

DUP reported #13681.

[Piotrek Koszuliński]

I see that no one pointed that yet, but such feature would require:

• rewriting the styles system, because it must recognise and fix situations where one style is applied on another,
• doing deep changes in data processors, so they also normalise such spans,
• tackling ugly edge cases like applying style A to "XYZ", then style B to "XY" and then style B to "Z" (try to clean up this mess now).

That means a lot of work. By "a lot" I mean at least 3+ months of full time work. Therefore, realistically looking, there's no chance this will be changed in CKEditor 4.

Furthermore, I wrote "changed" because it's not even clear that it should work this way. There are situations where these spans should be kept separately as some algorithms need to match them to defined CKE styles. Merging would affect these cases. You are thinking only about CSS styles, but what if someone configured two separate CKE styles – one applying <span data-foo> and second <span data-bar> – then merging them may be incorrect. Depends on the style semantics. Therefore, CKE styles would need to be able to work both ways and this increases complexity of any change.

Finally, I didn't see an argument for merging styles other than that e.g. text-decoration and color styles need to be applied in the correct order. But that's a separate issue which may have a higher chance to be fixed (although it's pretty complex too).