Posted by chowdah on September 16, 2009 at 4:13pm
I'm using Drupal 6.13 with the WYSIWIG module and tinyMCE.
I have used WYSIWIG module's profile>configure dialogue to set tinyMCE to "Use theme CSS". When inputting data using tinyMCE, the style is not the site's themed style, however the resulting node displays to the correct css. Is this the way it is supposed to work or should the text I'm typing into the editor be using the site's theme css as I type?
I posted this question in the forums and it got buried with no responses. Thanks for any help with this!
Comments
When you set the editor to
When you set the editor to "Use theme CSS" it simply means the stylesheets from your theme are included in the editing area iFrame.
Let's say you've styled the body tag of your site with a black background, and some other tag wrapping the actual node content has a blue background. Since the editing area content does not include that wrapper tag, the editor will have a black background, but the final rendered node will have a blue background.
To work around this, TinyMCE adds a class (mceContentBody) to the body tag in the editing area. You can use that in your theme's stylesheets to turn that black body background to blue, only in the editor. Basically, you want the editor's body tag style match the style of what's wrapping your node.
Ex:
mytheme.css
body {
background-color: black;
color: red;
}
body.mceContentBody { /Only used in TinyMCE, overrides the style above/
background-color: blue;
/color will still be red so we don't need to specify that if we want it to stay the same./
}