How to change background of TinyMCE?

问题

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.

回答1:

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

回答2:

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.

回答3:

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

回答4:

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

回答5:

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!

回答6:

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

回答7:

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

回答8:

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

来源：https://stackoverflow.com/questions/1414332/how-to-change-background-of-tinymce

标签

php

javascript

tinymce