TinyMCE 5.x - 突出显示自定义按钮答案

【问题标题】：TinyMCE 5.x - highlight custom buttonTinyMCE 5.x - 突出显示自定义按钮
【发布时间】：2020-05-07 21:19:27
【问题描述】：

我创建了一个自定义链接按钮，并希望它在您在文本编辑器中选择/单击链接时突出显示/选中，就像单击粗体文本显示选中的粗体图标一样。在 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)。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery tinymce tinymce-5

【解决方案1】：

您可以使用addToggleButton 而不是addButton，然后调用setActive。

这是我的代码的 sn-p。

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

https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#togglebutton

【讨论】：

【解决方案2】：

@Muki 的回答与我所做的类似，但我在这里引用了 tinymce git repo 中锚按钮的核心代码https://github.com/tinymce/tinymce/blob/develop/modules/tinymce/src/plugins/anchor/main/ts/ui/Buttons.ts

我将editor.ui.registry.addButton 更改为editor.ui.registry.addToggleButton，并在onAction 之后添加了onSetup: (buttonApi) => editor.selection.selectorChangedWithUnbind('a:not([href])', buttonApi.setActive).unbind 而不是stateSelector。

如下所示：

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

【讨论】：