javascript - How to add Custom class on custom button in TinyMCE 4 addButton() - Stack Overflow

admin管理员组

文章数量:1287554

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>

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.

• javascript
• jquery
• html
• tinymce-4

Share Improve this question Follow asked Feb 9, 2016 at 6:39 RaichuRaichu 24711 gold badge77 silver badges2121 bronze badges 2

• class: 'MyCoolBtn mycostom_class etc', ? – madalinivascu Commented Feb 9, 2016 at 6:41
• @madalin ivascu, Thanx for the reply. I jsut want to confirm that 'MyCoolBtn' is the customClass I am trying to add. TinyMCE JS itself appends predefined classes at runtime. adding class: 'MyCoolBtn', does not work for me. – Raichu Commented Feb 9, 2016 at 6:48

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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.

add another class in the code along with a. 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

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");
            }
        }
});

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

本文标签： javascriptHow to add Custom class on custom button in TinyMCE 4 addButton()Stack Overflow