How to disable TinyMCE from applying inline styles in dropdown


I'm implementing a custom editor.css stylesheet for TinyMCE, and as expected, my custom styles are showing up just fine. The problem is when I hover over my custom styles, it doesn't seem to switch the text colour to white, like it does with the category text.

I have set two stylesheets for the "uiEditorCssPaths" in my episerver.config file, with one being the typography styles and the other being the custom style definitions, which looks something like this:

h1 {
    EditMenuName: Heading 1;

h2 {
    EditMenuName: Heading 2;



This works. I can see my custom styles in the Styles dropdown. But when I hover over them, the background colour changes to blue (that's OK) but the text colour stays dark grey, which happen to be the colour I'm using in my typography stylesheet for the body element.

Here's a screenshot:

How can I fix this? Removing the text colour from the typography stylesheet will cause all text to use the default text colour, which in this case is black. And I'd really like to maintain the whole WYSIWYG thing intact if possible. It doesn't make sense to me if the styles in TinyMCE appear differently to the actual stuff.

Hope someone can help. Thanks in advance.

Jul 01, 2013 13:50

You should be able to trace where that blue thing is coming from if you F12 on the dropdown element...

Jul 01, 2013 14:03

The blue background is from the standard UI stylesheet which is fine. What I want to get rid of is the inline colour that's being applied to the select item by TinyMCE. I'm guessing it's scanning the stylesheet for styling rules, and applying it to the select items. The problem is that the colour sticks on hover.

Jul 02, 2013 8:46
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.