Question

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

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

我希望这种颜色在编辑时应用于可视化编辑器，这样他们就会看到它的样子。

作为测试，我尝试通过调用：

来修改编辑器的背景颜色

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

它不起作用。

Answer 1

content_style设置适用于＆＃34; body＆＃34;中的元素。在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变量可以工作），但这也应该完成工作。

Answer 2

原来我需要做的就是：

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

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

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

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

2 个答案: