How to change background of TinyMCE ?

Question

I have just install TinyMCE editor for my website. But the default background is black and text colour is gray. Anybody can tell me how to change background to white and text colour to black. Thanks you verry much.

Answer 1

http://wiki.moxiecode.com/index.php/TinyMCE%3AConfiguration/editor%5Fcss

Without knowing the specifics of your site configuration, I am going to guess that it is trying to load up some css files. Look through the configuration docs. You might need to add or modify some CSS (if it is already loading some).

Answer 2

TinyMCE is probably using the main stylesheet of your website. And in this case it's with grey text on a black background.

All you need to do is add this style to your main stylesheet:

body.mceContentBody { 
   background: #fff; 
   color:#000;
}

And then hard clear your cache or restart the session so that TinyMCE will load up the CSS fresh. And then your edit area will now show black text (#000) on white backing (#fff).

Answer 3

Or you can change the color using js:

tinyMCE.init(
        mode : "textareas",
        theme : "simple",
        oninit : "postInitWork"
    });

function postInitWork()
{
  var editor = tinyMCE.getInstanceById('myEditorid');
  editor.getBody().style.backgroundColor = "#FFFF66";
}

Answer 4

Adding the following code to the theme stylesheet worked perfectly!

   body.mceContentBody { 
   background: #fff; 
   color:#000;
}

I was pulling my hair out on this one -- and believe me, I don't have any hair to spare. :-) Thank you!

Answer 5

Thank you, Sijo. I need to conditionally change the background for rad-only text areas and that did it.