19

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.

8 Answers 8

16

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";
}
11

I strongly advise you to use the tinymce configuration to influence styles in tinymce, instead of fiddling with core css files.

There is the content_css setting which allows you to specify a ccs file which will overwrite the default behaviour (css). That's the way to go. You may use the css from the other answers provided.

2
  • i wish there was a way to just specify a simple style (e.g. background black, text color white) without needing to actually have a CSS file!
    – Michael
    Apr 1, 2019 at 21:33
  • For inline mode, the docs say you have to use core css files Mar 20, 2021 at 22:45
7

Add BODY_CLASS To init like this:

<script type="text/javascript">
tinyMCE.init({
    mode: "textareas",
    theme: "advanced",
    theme_advanced_buttons1: "bold,italic,underline",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_default_foreground_color: "#FFFFFF",
    body_class: "mceBlackBody"
});
</script>

Within content.css of correct theme, simply add the following entry:

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

This will make the body black and the text white within the editor

6

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).

2

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!

1
  • Correct, but be sure to turn off background-image property, I had a problem with inheritance from body's background-image. Add background-image:none; to .mceContentBody style. Feb 10, 2013 at 22:13
1

http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/editor_css

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).

1

Ran into the same issue a moment ago and found that my issue was caused because the skin (cirkuit) has !important; hack over writing this.

html, body {
    background: #FFFFFF !important;
    margin: 0;
    padding: 0;
}
1

I would suggest that you change the css file content.min.css located in your theme directory. Change the definition of

body{background-color:#595345;}

to anything your wish

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.