使用@draft-js-plugins/anchor 以编程方式打开 AddLinkForm

问题描述 投票:0回答:0

我正在使用@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>

工具栏工作正常,键绑定也是如此。但是,如何在不单击的情况下以编程方式打开添加链接表单?

reactjs draftjs
© www.soinside.com 2019 - 2024. All rights reserved.