Question

我想在tinyMCE addButton（）函数中的自定义按钮上添加自定义类。

例如

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和一些类。我想在该div上添加我的自定义类以及其他类。

按钮的当前HTML是

＆＃13;

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

＆＃13;

请建议一种方法来获取div Id或在包含该按钮的div上插入类。

Answer 1

只需在它们之间写入带有空格的类名。

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

但它会在你给出的每个自定义类之前自动添加mce。所以要添加CSS使用类，如：

.mce-ampforwp-copy-content-button

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

Answer 2

您可以使用属性子类型

添加类

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 3

在代码中添加另一个类以及昏迷。例如：

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 4

只需使用此编码即可。这将使你感到高兴。

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

如何在TinyMCE 4 addButton（）中的自定义按钮上添加自定义类

4 个答案: