css - TinyMCE:为完整的编辑器内容设置背景颜色？

Question

我正在使用 TinyMCE 4。不幸的是，“backcolor”控件似乎只允许更改文本，而不是整个段落。即使我在 TinyMCE 的状态栏中选择一个段落并应用背景色，它也只应用于内部跨度，而不是段落本身。我需要为完整内容设置背景颜色，而不仅仅是部分内容。这应该应用于 HTML 输出，类似于

<div style="background-color: #f00">[complete editor content]</div>

感谢您的帮助。

Answer 1

您可以使用此代码访问 tinymce 的主体以设置背景颜色:

tinymce.activeEditor.getBody().style.backgroundColor = '#<yourcolor>';

缺点:以这种方式设置背景颜色不会改变/影响编辑器内的 html 内容。因此，您必须以单独的方式处理/更新/存储该值。

您还可以在初始化 tinymce 时添加一个按钮:

tinymce.init({
...
        setup: function (editor) {
            editor.addButton('mybutton', {
                text: 'Set bgColor',
                icon: false,
                onclick: function () {
                    editor.getBody().style.backgroundColor = '#E5FFCC';
                }
            });
...
});