How to add Custom class on custom button in TinyMCE 4 addButton()

Question

I want to add custom class on custom button in tinyMCE addButton() function.

For Example

editor.addButton('keywords', {
              text: 'Insert Keywords',
              class: 'MyCoolBtn', 
              icon: false,
              onclick: function () {

                  if($(this.id).hasClass("mce-active"))
                      EditorMethods.removeKeywordsToolbar(this.id);
                  else
                      EditorMethods.displayKeywordsToolbar(this.id);  
              }
          });

This does not work for me. TinyMCE JS add unique Id and some classes on the div containing the button. I want to add my custom class along with other classes on that div.

Current HTML of button is

 <div aria-labelledby="mceu_35" tabindex="-1" class="mce-widget mce-btn mce-first mce-last mce-btn-has-text mce-active" id="mceu_35" role="button"> <button tabindex="-1" type="button" role="presentation"> <span class="mce-txt">Insert Keywords</span> </button> </div>

Please suggest a way to either get the div Id or to Insert the class on that div containg that button.

Answer 1

Simply write the class names with space in between them.

editor.addButton( 'ampforwp_tc_button', {
        text: 'Copy The Content',
        icon: 'dashicons dashicons-clipboard',
        classes: 'ampforwp-copy-content-button ', 
        tooltip: 'Copy The Content from Main Editor', 
        onclick: function() {
            editor.insertContent(tinymce.editors.content.getContent());
        } 
});

But it wil automatically adds the mce- before each custom class you give. So to add the CSS use classes like:

.mce-ampforwp-copy-content-button

It will surely resolve the problem like it did to me.