Javascript TinyMCE添加切换样式

我正在开发TinyMCE插件，我想让它做的一件事是注册切换自定义格式的命令/按钮

例如，如果您单击TinyMCE中的粗体按钮，它将以粗体文本突出显示粗体按钮。深入研究源代码，我发现这是通过：tinymce.EditorCommands.addCommands实现的，我认为我似乎不知道如何复制它。TinyMCE的文档也很可怕=(

因此，给定customFormat，我希望能够通过我的插件设置一个按钮，当应用customFormat时，它会在工具栏上显示粗体、斜体和其他类似的按钮。单击我的customFormat可以打开/关闭该格式。我可以通过“addCommand”和“addButton”轻松完成toogle但它没有像Bold和其他公司那样进行状态跟踪

显示我当前的非工作尝试（此代码位于我的插件创建方法的init中）：

以下是addCommands的“文档”链接：

经过更多的观察，我发现这似乎是完美的：

但当我实现代码时，它不会更改按钮的状态：

  ed.addCommand('MyFormat', function(ui, v) {
    ed.formatter.toggle("thoughtFormat");
  });

  ed.addQueryStateHandler('MyFormat', function() { 
      return ed.formatter.match('thoughtFormat');
  });

  ed.addButton('myformat', {cmd : 'MyFormat'});

以下是一个例子：

ed.controlManager.get('my_control_element').setActive(true); // could be bold or whatever

---

多亏了Thariama的见解，使我得以深入挖掘，最终找到了如何做到这一点。我不确定这是“正确的方法”，但正如我所说，TinyMCE有着可以想象的最糟糕的文档

对我来说，关键是使用setActive技巧将钩子设置为onNodeChange事件。完整示例插件带有自定义按钮，当光标所在的位置出现该格式时，该按钮将激活：

(function() {
   tinymce.create('tinymce.plugins.CoolPlugin', {  
   init : function(ed, url) {   

      ed.addCommand('MyFormat', function(ui, v) {
        ed.formatter.toggle("myFormat");
      });

      ed.addButton("coolformat", {
        title : 'MyFormat Tooltip', 
        cmd : 'MyFormat',
        image: url + '/coolformat.png',
      });

      ed.onNodeChange.add(function(ed, cm, n) {
        active = ed.formatter.match('myFormat');
        control = ed.controlManager.get('coolformat').setActive(active);
      });

      ed.onInit.add(function(ed, e) {
        ed.formatter.register('myFormat', 
           {inline: 'span', classes : ['cool'] } );
      });
  }
  });

  // Register plugin
  tinymce.PluginManager.add('cool', tinymce.plugins.CoolPlugin);
})();

---

如果有人不想用“插件”的方式来做，下面是

TinyMCE 4.x

的指南

首先，您需要定义自定义格式：

formats: {
   custom_format: {inline: 'span', styles: {color: "red"}, attributes: {class: 'some_css_class'}}
}

然后，您必须在工具栏上添加一个按钮：

toolbar: "mybutton",

接下来，您需要设置按钮，以便它切换格式：

setup: function(editor) {
        editor.addButton('mybutton', {
            text: 'My button',
            icon: false,
            onclick: function() {
                tinymce.activeEditor.formatter.toggle('custom_format')
            }
        });
}

此外，如果您希望编辑器自动设置按钮的状态以指示当前节点的格式，请将其添加到

setup

功能：

onPostRender: function() {
    var ctrl = this;                
    editor.on('NodeChange', function(e) {
        ctrl.active(e.element.className == "some_css_class")
    });
}

您的

tinymce.init

函数应该如下所示：

tinymce.init({
    selector: "textarea",
    formats: {
       // Other formats...
       custom_format: {inline: 'span', styles: {color: "red"}, attributes: {class: 'some_css_class'}}
    }
    // Other default toolbars
    toolbar_n: "mybutton",

    // Finally, setup your button
    setup: function(editor) {
        editor.addButton('mybutton', {
            text: 'My Button',
            icon: false,
            onclick: function() {
                tinymce.activeEditor.formatter.toggle('custom_format')
            },
            onPostRender: function() {
                var ctrl = this;                
                editor.on('NodeChange', function(e) {
                    ctrl.active(e.element.className == "some_css_class")
                });
            }
        });
    }

请注意，我在自定义格式中添加了

class

属性。这种方法使我能够在单独的样式表文件中定义自定义样式，并尽可能保持标记的干燥（无内联样式！）。将

content\u css

选项指向您的样式表，您就可以开始了。

---

然而，由于我使用Rails作为后端，使用BatmanJS作为前端（我对后者是相当陌生的），我无法理解资源路由是如何工作的，最终将我的自定义样式添加到tinyMCE skin本身的默认内容样式表文件中（位于

skins/skin\u NAME/content.min.css

）.

看看controlmanager和标志active/函数setActiveI会看的。感谢提示。虽然TinyMCE的文档非常糟糕，所以如果您碰巧有任何有帮助的示例或链接，请告诉我。controlmanager不是在插件中的ed下定义的。因此，此代码引发了一个异常。我正在使用更新我的答案我还发现了另一件事。嗯，你需要安装编辑器。你可以通过var ed=tinymce.get（'your_editorid'）获得一个；是的，插件中已经定义了ed。但ed中没有定义controlManger。应该是这样，至少在编辑器实例初始化之后-之前没有。谢谢！将代码放在ed.OnInit中，但现在它始终显示为活动。当我单击非格式化文本（如粗体）时，它不会更新。更新：不再，由于TinyMCE已升级到4.x，其中一些方法已被弃用。这是什么``ed.onNodeChange.add（函数（ed，cm，n）{active=ed.formatter.match（'myFormat'）；control=ed.controlManager.get（'coolformat'）。setActive（active）；}）“``现在在4.x以后的版本中是等效的吗？非常好的回答，谢谢！一个小错误：您必须使用

样式：{color:“red”}

（注意s）来获得红色字体颜色；）

tinymce.init({
    selector: "textarea",
    formats: {
       // Other formats...
       custom_format: {inline: 'span', styles: {color: "red"}, attributes: {class: 'some_css_class'}}
    }
    // Other default toolbars
    toolbar_n: "mybutton",

    // Finally, setup your button
    setup: function(editor) {
        editor.addButton('mybutton', {
            text: 'My Button',
            icon: false,
            onclick: function() {
                tinymce.activeEditor.formatter.toggle('custom_format')
            },
            onPostRender: function() {
                var ctrl = this;                
                editor.on('NodeChange', function(e) {
                    ctrl.active(e.element.className == "some_css_class")
                });
            }
        });
    }