Opened 10 years ago

Last modified 6 years ago

#7212 confirmed Bug

Colored link problematic

Reported by: Garry Yao Owned by:
Priority: Normal Milestone:
Component: Core : Styles Version: 3.1
Keywords: Cc:


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

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

Change History (7)

comment:1 Changed 10 years ago by Garry Yao

Component: Core : Output DataCore : Styles
Status: newconfirmed
Version: 3.1

comment:2 Changed 10 years ago by Wiktor Walc

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

comment:3 Changed 9 years ago by Philippe Meunier

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

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

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

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

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

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy