How to effect TinyMCE styles in edit mode

by Ledwell, Brian A — last modified Mar 01, 2013 04:52 PM

This simple trick will allow you to specify a stylesheet that the tinyMCE editor will use.

Use this trick if you run into a problem where you dont want specific styles to display when your users are in edit mode.

For example in my case I had an inner shadow on a bunch of images but that inner shadow didn't allow an editor to select the image object. Nothing in "ploneCustom.css" had any effect on the styles inside the window in tinyMCE.. so thanks again to Nathan VanGheem :) the solution was to tell tinyMCE to use the existing style sheet along with another I created.

So if your having this problem do the following;

Create the CSS File

create a new css file inside the "custom folder" . I titled mine "tinyMCECustom.css"
save that file with what ever changes you want. you can prepend .mceContentBody before your style as well. so do something like
.mceContentBody .yourClassHere { background-color:orange;}
save

Edit TinyMCE Control Panel

go into "site setup"
choose "TinyMCE Visual Editor"
In the "Layout" tab look under "Choose the CSS used in WYSIWYG Editor Area"
Place the following in there
portal_tinymce/@@tinymce-getstyle,tinyMCECustom.css

You can append additional style sheets if you want to separated by commas. The beginning part tells TinyMCE to use the existing stylesheets then use yours, which in my case is used to overwrite some existing styles.

Note. You do NOT need to register this style sheet in the "Portal_CSS Registry"