如何在 TinyMCE 4 addButton() 中的自定义按钮上添加自定义 class

Question

我想在 tinyMCE addButton() 函数中的自定义按钮上添加自定义 class。

例如

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

这对我不起作用。 TinyMCE JS 在包含按钮的 div 上添加唯一 ID 和一些 classes。我想在 div.

上添加我的自定义 class 和其他 classes

按钮的当前HTML是

 <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>

请建议获取 div ID 或在包含该按钮的 div 上插入 class 的方法。

Answer 1

在代码中添加另一个 class 和昏迷。例如：

class: 'MyCoolBtn , someOtherClass',

如果您想更改 dom

的某些属性，您可以覆盖 css

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

CSS 应该有效

Answer 2

只需使用此编码..这会对您有所帮助。

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

Answer 3

您可以使用属性子类型添加 class

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

Answer 4

只需在 class 之间写上 space 即可。

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

但它会自动在您提供的每个自定义 class 之前添加 mce-。所以要添加 CSS 使用 class 像：

.mce-ampforwp-copy-content-button

它一定会像我一样解决问题。

如何在 TinyMCE 4 addButton() 中的自定义按钮上添加自定义 class

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

html

javascript

jquery

tinymce-4