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

Question

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

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

我找到了一个可能不完美的解决方案(例如,如果您选择文本的一部分,那么这不会像我希望的那样工作),但是现在它做了我想要的:

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

例如,如果我在链接上执行此操作,脚本会将类名"test"添加到我的标记中.

Answer 2

为了能够向编辑器中添加类，您需要在编辑器中添加一个dom元素以将该类添加到其中。Textnodes可能没有类。因此，我建议您在要添加的类中插入一个span元素，并将其包裹在实际选择中。请注意，如果选择越过段落边界，这将行不通（在这种情况下，您将需要更复杂的代码）。尝试这个：

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