Colors not shown in visual editor for already styled text

[pavelevap]

Start new post

Write any word

Select this word with mouse and click "Bold"

Then select any other font color to apply it to bolded text

Now you can see that selected color is not applied in visual editor, there is only black bold text. Probably related to Twenty Eleven editor style...

I am unable to reproduce this.

I can apply red and bold to text using the Visual editor in 3.2, the text appears red and bold in both the visual editor in the administration area and it also appears red and bold on the front facing pages of the site.

Tested once again in IE9 and Firefox.

After following steps above, I received in HTML editor:

<span style="color: #339966;"><strong>kjhjb</strong></span>

I tried also Firebug and I can see:

<span data-mce-style="color: #339966;" style="color: #339966;">
<strong>kjhjb</strong>
</span>

For span is applied inline color, but for strong is applied * { color: #333333; }
from editor-style.css.

Ah, tried again and it seems one can apply colour and then bold successfully but not the other way around.

Confirmed in FF5, I think this is more related to TinyMCE though.

Replying to MattyRob:

Confirmed in FF5, I think this is more related to TinyMCE though.

No, there's no color setting for <strong> in style.css so this is a bug in editor-style.css.

Replying to azaozz:

No, there's no color setting for <strong> in style.css so this is a bug in editor-style.css. Not sure if the whole * {...} selector is needed as it's not present in style.css

I submit to your superior knowledge that this is the source. I can confirm this bug in 3.1 also where there is also no color parameter from <strong> in the editor-style.css file.

I've got no idea how to fix this though!

I thought I'd see if I could fix this by comparing italic text with bold text, however the issue is present for italic text too.

1. Make some text italic
2. Apply a colour

RESULT: No colour applied in visual editor.

1. Apply a colour
2. Make text italic

RESULT: Coloured and italic text

Hmm, after a little messing about with the CSS I think this works. Not sure if the 'color' specified _needs_ to be there as it is also defined under body.

Asking Ian to review this.

This patch looks good, the color property should not be set with the * selector.

In [18433]:

Twenty Eleven: Don't set color in the * selector in editor styles. props MattyRob, fixes #18011 for trunk.

In [18434]:

Twenty Eleven: Don't set color in the * selector in editor styles. props MattyRob, fixes #18011 for 3.2.