我创建了一个自定义链接按钮,当您在文本编辑器中选择/单击链接时,希望它以突出显示/选中的方式显示,就像单击加粗文本会显示选中的加粗图标一样。在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);
}
});
}
https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#togglebutton