Javascript TinyMCE 5.x-高亮显示自定义按钮

我创建了一个自定义链接按钮，希望当您在文本编辑器中选择/单击链接时，它显示为高亮显示/选中，就像单击粗体文本显示选中的粗体图标一样。在TinyMCE 4中，您可以简单地使用“stateSelector”在选择该类型的DOM元素时将其高亮显示，如下所示：

editor.ui.registry.addButton('SpecialLink', {
        icon: 'link',
        onAction: makeSpecialLink(),
        **stateSelector: 'a[href]'**
});

我找不到任何关于在TinyMCE 5中用什么替换了stateSelector的信息，到目前为止，我所能做的就是在TinyMCE.init中重新创建一些功能：

    init_instance_callback: function(editor) {
            editor.on("SelectionChange", function(e){
                let elem = editor.selection.getNode();
                if( $(elem).is("a") )
                    console.log("Highlight the Special Link button");
                else
                    console.log("Deselect the Special Link button");
            })
        }

我可以引用

myMCE.plugins.SpecialLink

，但我不能在上面调用

setActive（true）

---

任何帮助都将不胜感激

您可以使用

addToggleButton

而不是

addButton

，然后调用

setActive

这是我的一段代码

  editor.ui.registry.addToggleButton('my-action', {
    icon: null,
    text: 'My action',
    onAction: function onAction() {
       // ...do stuff
    },
    onSetup: function(api) {
      function nodeChangeHandler(){
        const selectedNode = editor.selection.getNode();
        return api.setActive(selectedNode.id === constants.id);
      }
      editor.on('NodeChange', nodeChangeHandler);
    }
  });
}

---

您可以使用

addToggleButton

而不是

addButton

，然后调用

setActive

这是我的一段代码

  editor.ui.registry.addToggleButton('my-action', {
    icon: null,
    text: 'My action',
    onAction: function onAction() {
       // ...do stuff
    },
    onSetup: function(api) {
      function nodeChangeHandler(){
        const selectedNode = editor.selection.getNode();
        return api.setActive(selectedNode.id === constants.id);
      }
      editor.on('NodeChange', nodeChangeHandler);
    }
  });
}

---

@Muki的答案与我的答案相似，但我在这里引用了tinymce的git repo中anchor button的核心代码

我将

editor.ui.registry.addButton

更改为

editor.ui.registry.addToggleButton

，并在设置时添加了

（buttonApi）=>editor.selection.Selector或ChangedWithUnbind（'a:not（[href]），buttonApi.setActive）。在
操作后取消绑定
而不是
状态选择器

如下所示：

editor.ui.registry.addToggleButton('SpecialLink', {
        icon: 'link',
        onAction: makeSpecialLink(),
        onSetup: (buttonApi) => editor.selection.selectorChangedWithUnbind('a:not([href])', buttonApi.setActive).unbind
});

@Muki的答案与我的答案相似，但我在这里引用了tinymce的git repo中anchor button的核心代码

我将
editor.ui.registry.addButton
更改为
editor.ui.registry.addToggleButton
，并在设置时添加了
（buttonApi）=>editor.selection.Selector或ChangedWithUnbind（'a:not（[href]），buttonApi.setActive）。在
操作后取消绑定
而不是
状态选择器

如下所示：

editor.ui.registry.addToggleButton('SpecialLink', {
        icon: 'link',
        onAction: makeSpecialLink(),
        onSetup: (buttonApi) => editor.selection.selectorChangedWithUnbind('a:not([href])', buttonApi.setActive).unbind
});