我正在使用@draft-js-plugins/anchor 在 draft.js 工具栏中添加一个链接按钮。单击该按钮可切换输入,您可以在其中输入 URL。我想要的是也将切换此输入绑定到 Ctrl+K。
链接插件初始化:
const linkPlugin = createLinkPlugin({});
const inlineToolbarPlugin = createInlineToolbarPlugin({});
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin, linkPlugin];
return { plugins, InlineToolbar, LinkButton: linkPlugin.LinkButton };
按键绑定:
function keyBindingFunction(e) {
if (e.keyCode === 75 /* `K` key */ && hasCommandModifier(e)) {
return 'link';
}
return getDefaultKeyBinding(e);
}
const handleKeyCommand = (command: any) => {
if (command === 'link') {
console.log('link');
return 'handled';
}
return 'not-handled';
};
效果图:
<EditorContainer>
<Editor
handleKeyCommand={handleKeyCommand}
keyBindingFn={keyBindingFunction}
plugins={plugins}
...
/>
<InlineToolbar>
{(externalProps) => (
<div>
<LinkButton {...externalProps} />
</div>
)}
</InlineToolbar>
</EditorContainer>
工具栏工作正常,键绑定也是如此。但是,如何在不单击的情况下以编程方式打开添加链接表单?