WordPress：更改管理员 wp_editor 背景颜色？答案

【问题标题】：WordPress: Change admin wp_editor background color?WordPress：更改管理员 wp_editor 背景颜色？
【发布时间】：2016-10-06 12:36:22
【问题描述】：

我希望我的用户能够在编辑页面屏幕上动态设置 wp_editor 的背景颜色。

例如，我使用虹膜颜色选择器让用户为其页面设置背景颜色。

我希望在他们编辑时将此颜色应用于可视化编辑器，以便他们看到它的外观。

作为测试，我尝试通过调用修改编辑器的背景颜色：

tinyMCE.init({
    selector: 'textarea',
    content_style: "div { background-color: #000000; }",
});

没用。

【问题讨论】：

标签： javascript wordpress tinymce wp-editor

【解决方案1】：

content_style 设置适用于 TinyMCE 中 HTML 文档“正文”内的元素 - 您真正想要做的是将 <body> 的背景设置为不同的颜色。

为此，请查看 init 的 content_css 设置：

tinymce.init({
  selector: 'textarea',
  ...
  content_css : "CSS/content.css"
});

这允许您加载外部 CSS 文件以在 TinyMCE 中使用。然后在 content.css 文件中你可以这样做：

body {
  .
  .
  background-color: gray;
}

现在编辑器本身的背景颜色将为灰色（基于上面的示例）。

如果您使用content_css，您真的不需要content_style，因为您可以将所有CSS 放在外部CSS 文件中。

编辑：

如果content_css 不起作用，您可以尝试使用 onInit 事件并更新 CSS：

tinymce.init({
  selector: 'textarea',
  setup: function (editor) {
    editor.on('init', function () {
        editor.getBody().style.backgroundColor = "#FFFF66";
    });
  ...
})

...结果如下：

（请注意，我只是通过控制台添加了它以表明可以完成）

您需要一种方法将该颜色传递给配置对象（JS 变量可以工作），但这也应该可以完成工作。

【讨论】：

背景颜色需要是动态的，所以依赖预定义的样式表是行不通的。由于用户从颜色选择器中进行选择，因此背景需要是任意数量的颜色。
@HWD - 请查看我的编辑。也许这对您的用例有用？
这似乎改变了摘录文本区域的背景颜色，而不是主要文本区域。我该如何定位呢？
那么您有自定义页面模板吗？什么是“摘录”textarea 与“主要”textarea？如果页面上有多个 TinyMCE 实例，您如何为每个实例定义配置？当我在我的 init 中使用该代码时，编辑器的主体会按预期变为黄色，但默认页面模板只有一个 TinyMCE 编辑器。（见上面的截图）
我使用的是标准编辑页面，就像您在示例中一样，除了我启用了摘录，因此还有一个文本区域用于摘录。当我使用你的脚本时，它会在那个文本框上启动 TinyMCE，而不是更新已经存在的那个。

【解决方案2】：

原来我只需要这样做：

tinyMCE.get(0).getBody().style.backgroundColor = color;

我正在使用 WordPress 的内置 Iris Color Picker。这是完整的电话：

$('.colorpicker').iris({
    change: function(event,ui){
        tinyMCE.get(0).getBody().style.backgroundColor = ui.color.toString();
    }
});

【讨论】：

tinyMCE.get(0).getBody().style.backgroundColor 这工作正常