TinyMce set text color of editor button

问题

I have a number of custom buttons which I want to style the text of each button to be different. However the 'style' option sets the style on the div not the button, so its not working.

Here is my code to generate the button

// 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);
            }
        });
    },

Here is the outputted 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>

Can anyone point me to the right option to use to have the style applied to the button? I need to style each button differently.

回答1:

You can make a CSS class with a descendant or child selector on buttons and apply it with TinyMCE's button setting of 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>

来源：https://stackoverflow.com/questions/31696391/tinymce-set-text-color-of-editor-button

标签

javascript

css

tinymce