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.init({
...
        setup: function (editor) {
            editor.addButton('mybutton', {
                text: 'Set bgColor',
                icon: false,
                onclick: function () {
                    editor.getBody().style.backgroundColor = '#E5FFCC';
                }
            });
...
});

Answer 2

您必须在动态生成的iframe中访问可修改的内容正文。 iframe是在编辑器初始化后生成的。

如果你的textarea id是foo，iframe的id是foo_ifr。

您也可以使用firebug或开发人员工具打开编辑器并使用dom explorer，您可能会看到内部动态生成的组件。

使用：

var iframe = document.getElementsByTagName("iframe")[0];
// or
var iframe = document.getElementsById("foo_ifr");

// check if iframe.contentDocument is cross-browser, i tested with IE 11.
var innerBody = iframe.contentDocument.getElementsByClassName("mceContentBody")[0];
innerBody.style.backgroundColor="red";

Answer 3

要获得所需的自定义样式，必须在初始化编辑器时创建新的自定义样式格式。这使您能够为元素定义CSS样式。例如

HTML

<form>
    <textarea></textarea>
</form>

JS

tinymce.init({
    selector: 'textarea',
    //merge with default formats
    style_formats_merge: true,
    //set up custom style formats 
    style_formats: [
        {title: 'Red Background', block: 'p', styles: {
            'background-color': '#ff0000', 
            'color':'white',
            'padding': '7px'}
        },
        {title: 'Blue Background', block: 'p', styles: {
            'background-color': '#0000ff', 
            'color':'white',
            'padding': '7px'}
        }
    ]
});

这将两种新的自定义格式与默认格式合并。见DEMO

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

3 个答案: