Opened 6 years ago

Last modified 3 years ago

#9295 confirmed Bug

Font Size and Bold/Italic/Underline create multiple spans

Reported by: Donald Hanson Owned by:
Priority: Normal Milestone:
Component: Core : Styles Version: 3.0
Keywords: IBM Cc: monahant@…


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;

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>

Change History (8)

comment:1 Changed 6 years ago by Jakub Ś

Component: GeneralCore : Styles
Status: newconfirmed

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.

comment:2 Changed 6 years ago by Jakub Ś

Cc: monahant@… added
Keywords: IBM added

#2203 was marked as duplicate.

comment:3 Changed 6 years ago by liujunhao

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

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


} var tempnodecss =;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



} = 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(0); reverse end reverseStr=reverseStr.replace(regSpanEnd,"");remove </span> tempcontent=""; reverse again start for(var iiii=0;iiii<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 ('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()]'a'))) return;

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



Last edited 6 years ago by liujunhao (previous) (diff)

comment:5 Changed 4 years ago by 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.

comment:6 Changed 4 years ago by Piotrek Koszuliński

DUP reported #13681.

comment:7 Changed 4 years ago by 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).

comment:8 Changed 3 years ago by Anna Tomanek

Summary: Font Size and Bold/Italic/Underline creates multiple spansFont Size and Bold/Italic/Underline create multiple spans
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy