tinyMCE 4：将 Class 添加到所选元素

Question

我创建了一个 tinymce 菜单项，我想要它做的是向选定的文本元素添加一个 class。我似乎无法弄清楚如何做到这一点。有什么建议么？添加我的菜单项如下所示：

tinymce.PluginManager.add('button', function(editor, url) {
    editor.addMenuItem('button', {
        icon: '',
        text: 'Button',
        onclick: function() {

            tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.selection, 'test'); //not working
        },
        context: 'insert',
        prependToContext: true
    });
});

如果有任何有用的提示，我将不胜感激。

Answer 1

为了能够将 class 添加到编辑器中，您需要在编辑器中添加一个 dom 元素以将 class 添加到其中。文本节点可能不包含 class。因此，我建议您插入一个 span 元素，其中 class 您想要添加的环绕实际选择。请注意，如果选择跨越段落边界，这将不起作用（在这种情况下，您将需要更复杂的代码）。试试这个：

onclick: function() {
    var ed = tinyMCE.activeEditor;
    var content = ed.selection.getContent({'format':'html'});
    var new_selection_content = '<span class="test">' + content + '</span>';
    ed.execCommand('insertHTML', false, new_selection_content);
},

Answer 2

我找到了一个可能不完美的解决方案（例如，如果您 select 文本的一部分，那么这不会像我希望的那样工作），但现在它可以满足我的要求：

tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.selection.getNode(), 'test');

例如，如果我在 link 上执行此操作，脚本会将类名 "test" 添加到我的标签中。

Answer 3

这对我有用：

setup: function(editor) {
  editor.ui.registry.addButton("addClassBtn", {
    icon: "insertdatetime",
    text: "Highlight ",
    onAction: function (_) {
      var newContent = "<span class='test'>" + editor.selection.getContent() + "</span>";
      editor.selection.setContent(newContent);

    }
  }
}

tinyMCE 4：将 Class 添加到所选元素

tinyMCE 4: add Class to selected Element

javascript

tinymce