Colored link problematic

[Garry Yao]

Currently editor produce colored link as following, which result in a mixed color looking (underline decoration) on result HTML.

<a href="http://ckeditor.com/"><span style="color: rgb(255, 0, 0);">CKEditor</span></a>

[Wiktor Walc]

Might be hard to fix due to a browser bug: #7223.

[Philippe Meunier]

Hope this bug gets looked into very soon, it is a real issue in our system.

[Jakub Ś]

#12590 was marked as duplicate.

I can see that this issue has been discussed in #4772 as well.

Although this looks like a simple issue it is a little bit problematic.

• When you put span inside link, the underline is not colored.
• When you put span outside of link there is no color applied at all.
• When you set styles for span and link then it works. We may need some clever way to wrap link in span and then assign styles to link. We will probably need some custom data-* attributes that will tell editor that styles were assigned to both elements link and wrapping span.

<p>The following equations are <a href="http://ssss"><span style="color:#FFD700">represente</span></a>d in the HTML source code as LaTeX expressions.</p>

<p>The following equations are <span style="color:#FFD700"><a href="http://ssss">represente</a></span>d in the HTML source code as LaTeX expressions.</p>

<p>The following equations are <span style="color:#FFD700"><a href="http://ssss" style="color:#FFD700">represente</a></span>d in the HTML source code as LaTeX expressions.</p>

[Piotrek Koszuliński]

There's bazillion cases for DOM structures, how the content is created (applying/removing styles, deleting text, pasting, cutting, typing) and styles applied by external stylesheets vs inline styles, etc etc etc. This is an absurdly hard thing to make it right and that's why it hasn't been done. I feel that only some very limited fixes like - applying style and link on the same selection may be handled. But we don't have time for that and the improvement will be very limited.

[Dmitri Lapin]

It is possible to workaround this problem by adding text-decoration:inherit to span inserted with color button.

config.colorButton_foreStyle = {
        element: 'span',
        styles: { color: '#(color)', 'text-decoration': 'inherit' }
};

[Jakub Ś]

This workaround may need additional ACF settings:

colorButton_foreStyle : {
	element: 'span',
	styles: { color: '#(color)', 'text-decoration': 'inherit' }
},
extraAllowedContent: 'span{text-decoration}'

but it sure is a good one. Great job @dm0_ !!!