0

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.

Paul M
  • 3,937
  • 9
  • 45
  • 53

1 Answers1

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>
Community
  • 1
  • 1
heenenee
  • 19,914
  • 1
  • 60
  • 86
  • 1
    Of course that makes a lot of sense. When adding classes:rank-button, it removed the mce-btn class so to keep things looking neat I had to add "classes: 'rank-button btn'" and it all worked fine. thnkx – Paul M Aug 10 '15 at 10:03