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]

When insert span tag,there is no method to combine the inner style.I looked the other tool like ckeditor.I paste the code here.Is there anyone can help me solove this problem? I think many friends will appreciate of your action.

mergeChild:function (node, tagName, attrs) {

var list = domUtils.getElementsByTagName(node, node.tagName.toLowerCase());得到 for (var i = 0, ci; ci = list[i++];) {

if (!ci.parentNode

domUtils.isBookmarkNode(ci)) {

continue;

} span单独处理 if (ci.tagName.toLowerCase() == 'span') {

删除span

if (node === ci.parentNode) {

alert("删除空白节点！");

domUtils.trimWhiteTextNode(node); if (node.childNodes.length == 1) {

node.style.cssText = ci.style.cssText + ";" + node.style.cssText; domUtils.remove(ci, true); continue;

}

} ci.style.cssText = node.style.cssText + ';' + ci.style.cssText; alert("现在的sytle"+ci.style.cssText); if (attrs) {

var style = attrs.style; if (style) {

style = style.split(';'); for (var j = 0, s; s = style[j++];) {

ci.style[utils.cssStyleToDomStyle(s.split(':')[0])] = s.split(':')[1];

}

}

} if (domUtils.isSameStyle(ci, node)) {

domUtils.remove(ci, true);

} continue;

} if (domUtils.isSameElement(node, ci)) {

domUtils.remove(ci, true);

}

}

}

[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).