TinyMce 设置编辑器按钮的文本颜色

Question

我有许多自定义按钮，我想将每个按钮的文本设置为不同的样式。但是 'style' 选项设置 div 上的样式而不是按钮，所以它不起作用。

这是我生成按钮的代码

// Add a button for rank
editor.addButton('rank', {
    text: 'Rank',
    tooltip: 'Highlight Rank',
    icon: false,
    style:'color:red;',
    onPostRender: function () {
        var button = this;
        editor.on('NodeChange', function (e) {
            if (editor.formatter.match('rank')) {
                button.active(true);
            } else {
                button.active(false);
            }
        });
    },

这是输出的html

<div id="mceu_0" class="mce-widget mce-btn mce-btn-small mce-first mce-last" tabindex="-1" aria-labelledby="mceu_0" style="color: red;" role="button" aria-label="Highlight Rank" aria-pressed="false">

<button role="presentation" type="button" tabindex="-1" >Rank</button></div>

谁能指出我将样式应用于按钮的正确选项？我需要为每个按钮设置不同的样式。

Answer 1

您可以在按钮上使用descendant 或child 选择器创建一个CSS 类，并使用TinyMCE's button setting 的classes 应用它：

tinymce.init({
    selector: "textarea",
    toolbar: "rank",
    setup: function (editor) {
        editor.addButton('rank', {
            text: 'Rank',
            tooltip: 'Highlight Rank',
            icon: false,
            classes: 'rank-button'
        });
    }
});

.mce-rank-button button {
  color: red !important;
}

<script src="http://tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<form method="post" action="somepage">
    <textarea name="content" style="width:100%"></textarea>
</form>