javascript - 如何使用 tinymce 在选择更改时启用/禁用自定义按钮

Question

我使用这段代码创建了一个自定义的 tinymce 按钮，用于更改一类图像。它在设置 block 中。

ed.addButton('cust_setimgaspreview', {
        title : 'Set image as a preview image',
        image : 'ikony/previews.png',
        onclick : function() {
            if(ed.selection.getNode().tagName == 'IMG')
            {
                 ed.selection.getNode().className = 'preview';
            } else {
                alert('You need to select an image.');
            }
        }
    });

如您所见，我使用了一种“丑陋的方法”来禁用除图像之外的其他元素的类更改。我怎样才能像 tinymce 使用其默认按钮(如编辑图像或编辑链接)一样禁用/启用按钮？我想我需要以某种方式捕获选择更改，然后根据选择更改按钮状态，但我不知道该怎么做。

Answer 1

刚弄明白 - 这很简单。我刚刚编辑了设置函数并添加了“onNodeChange”处理程序。

setup : function(ed) {

    ed.onNodeChange.add(function(ed, cm, node) {
        cm.setDisabled('cust_setimgaspreview', !(node.tagName == 'IMG'))
    });

    ed.addButton('cust_setimgaspreview', {
        title : 'Set image as a preview image',
        image : 'ikony/previews.png',
        onclick : function() {
            ed.selection.getNode().className = 'preview';
        }
    });

}