如何更改 TinyMCE 的背景？答案

【问题标题】：How to change background of TinyMCE?如何更改 TinyMCE 的背景？
【发布时间】：2009-09-12 05:00:41
【问题描述】：

我刚刚为我的网站安装了 TinyMCE 编辑器。但默认背景为黑色，文本颜色为灰色。任何人都可以告诉我如何将背景更改为白色并将文本颜色更改为黑色。

【问题讨论】：

【解决方案1】：

或者你可以使用js改变颜色：

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

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

【讨论】：

【解决方案2】：

我强烈建议您使用 tinymce 配置来影响 tinymce 中的样式，而不是摆弄核心 css 文件。

content_css 设置允许您指定将覆盖默认行为 (css) 的 ccs 文件。这就是要走的路。您可以使用提供的其他答案中的 css。

【讨论】：

我希望有一种方法可以指定一个简单的样式（例如背景黑色，文本颜色白色），而无需实际拥有 CSS 文件！
对于内联模式，docs 说你有可以使用核心 css 文件

【解决方案3】：

添加BODY_CLASS 像这样初始化：

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

在正确主题的 content.css 中，只需添加以下条目：

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

这将使编辑器中的正文变为黑色，文本变为白色

【讨论】：

【解决方案4】：

TinyMCE 可能正在使用您网站的主样式表。在这种情况下，它是黑色背景上的灰色文本。

您需要做的就是将此样式添加到您的主样式表中：

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

然后硬清除缓存或重新启动会话，以便 TinyMCE 重新加载 CSS。然后您的编辑区域现在将在白色背景 (#fff) 上显示黑色文本 (#000)。

【讨论】：

【解决方案5】：

将以下代码添加到主题样式表中效果很好！

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

我在这个上拔了头发 - 相信我，我没有多余的头发。 :-) 谢谢！

【讨论】：

正确，但一定要关闭 background-image 属性，我在继承 body 的 background-image 时遇到了问题。将 background-image:none; 添加到 .mceContentBody 样式中。

【解决方案6】：

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

在不知道您的站点配置细节的情况下，我猜测它正在尝试加载一些 css 文件。查看配置文档。您可能需要添加或修改一些 CSS（如果它已经加载了一些）。

【讨论】：

【解决方案7】：

刚才遇到了同样的问题，发现我的问题是因为皮肤 (cirkuit) 有 !important; hack 写这个。

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

【讨论】：

【解决方案8】：

我建议您更改位于主题目录中的 css 文件 content.min.css。改变

的定义

body{background-color:#595345;}

随心所欲

【讨论】：