CODEWITHSUNDEEP
javascriptjqueryhtmltinymce-4
Raichu
Raichu

Reputation: 247

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

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.

Upvotes: 5

Views: 11688

Answers (4)

Marqas
Marqas

Reputation: 174

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.

Upvotes: 6

Raviraj555
Raviraj555

Reputation: 9

you can add class by using property subtype

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

                  if($(this.id).hasClass("mce-active"))

                      EditorMethods.removeKeywordsToolbar(this.id);
                  else
                      EditorMethods.displayKeywordsToolbar(this.id);  
              }
          });

Upvotes: 0

Aruna Warnasooriya
Aruna Warnasooriya

Reputation: 339

Just use this coding..This will hellp you.

editor.addButton('myButton',{
        text:'My Button',
        icon:false,
        onclick:function(e){
            parent_id = e.target.parentNode.id;
            if($("#"+parent_id).hasClass("mce-active")==false){
                $("#"+parent_id).addClass("mce-active");
            }else{
                $("#"+parent_id).removeClass("mce-active");
            }
        }
});

Upvotes: 0

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

add another class in the code along with coma. for eg: 

class: 'MyCoolBtn , someOtherClass',

you can override the css if you want to change some attribute of the dom

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

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

the CSS should work

Upvotes: 0

Related Questions