javascript - TinyMCE 添加切换样式

Question

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

例如，如果您在 TinyMCE 中单击粗体按钮，它将在粗体文本中突出显示粗体按钮。深入研究源代码，我发现这是通过以下方式发生的:tinymce.EditorCommands.addCommands 以为我似乎无法弄清楚如何复制它。 TinyMCE 的文档也很糟糕 =(

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

显示我当前的非工作尝试(这段代码在我的插件创建方法的初始化中):

tinymce.EditorCommands.call('addCommands', {
   'MyFormat' :  function(name) {
      ed.formatter.toggle("customFormat");
    }
},'exec');

tinymce.EditorCommands.call('addCommands', {
   'MyFormat' : function(name) {
       return ed.formatter.match('customFormat');
    } 
},'state');

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

这里是 addCommands 的“文档”链接: http://www.tinymce.com/wiki.php/API3:method.tinymce.EditorCommands.addCommands

环顾四周后，我发现这似乎是完美的: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addQueryStateHandler

但是当我实现代码时，它并没有改变按钮的状态:

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

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

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

Answer 1

如果有人不想以“插件”方式进行操作，这里是 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_css 选项指向您的样式表，您就可以开始了。然而，由于我使用 Rails 作为后端和 BatmanJS 作为前端(我对后者相当陌生)，我无法弄清楚 Assets 路由是如何工作的，最终添加了我的自定义样式为 tinyMCE 皮肤本身的默认内容样式表文件(位于 skins/SKIN_NAME/content.min.css)。