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

【问题标题】：How to add Custom class on custom button in TinyMCE 4 addButton()如何在 TinyMCE 4 addButton() 中的自定义按钮上添加自定义类
【发布时间】：2016-02-09 06:39:05
【问题描述】：

我想在 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 是

 &lt;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"&gt; &lt;button tabindex="-1" type="button" role="presentation"&gt; &lt;span class="mce-txt"&gt;Insert Keywords&lt;/span&gt; &lt;/button&gt; &lt;/div&gt;

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

【问题讨论】：

class: 'MyCoolBtn mycostom_class etc', ?
@madalin ivascu，感谢您的回复。我只是想确认“MyCoolBtn”是我要添加的 customClass。 TinyMCE JS 本身会在运行时附加预定义的类。添加 class: 'MyCoolBtn', 对我不起作用。

标签： javascript jquery html tinymce-4

【解决方案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

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

【讨论】：

再一次，stackoverflow 胜过文档。谢谢！

【解决方案2】：

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

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 应该可以工作

【讨论】：

覆盖 DOM css 对我不起作用。类保持不变。
你能把代码贴在这里/jsfiddle，你在尝试什么？

【解决方案3】：

只需使用此编码..这会帮助你。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：