TinyMce установлен цвет текста кнопки редактора

Question

У меня есть несколько пользовательских кнопок, которые я хочу, чтобы текст каждой кнопки отличался. Однако опция «стиль» устанавливает стиль на 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

Вы можете сделать класс CSS с descendant или child селектор пуговиц и применять его с 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>