如何在草稿 js 中创建自定义键绑定（Ctrl+Enter）答案

【问题标题】：how to create custom key bindings (Ctrl+Enter) in draft js如何在草稿 js 中创建自定义键绑定（Ctrl+Enter）
【发布时间】：2020-05-14 15:28:23
【问题描述】：

Draft js中需要使用Ctrl+Enter调用函数

"draft-js": "^0.11.4",
"react-draft-wysiwyg": "^1.14.4",

正如issue 和here 所提到的，我这样编写代码但效果不佳。

const  keyBindingFn = (event) => {
    if (KeyBindingUtil.hasCommandModifier(event) && event.keyCode === 13) { return callMyFunc(); }
    return getDefaultKeyBinding(event);
  }

我在 Editor props 中设置的方式：

return (
    <Editor
      editorState={editorState}
      onChange={(newState) => setEditorState(newState)}
      keyBindingFn={keyBindingFn}
    />
)

此功能适用于 Ctrl+k 或其他键。

我尝试的另一种方法如下所示，您可以检查它 https://codepen.io/michael_cox/pen/xrvdRW?editors=1111 但对我来说它也行不通。也许是因为使用草稿所见即所得

const keyBindingFn = (event) => {
    if (event.keyCode === 13 && event.ctrlKey) {
         console.log('Ctrl+Enter');
    }
    return getDefaultKeyBinding(event);
  };

【问题讨论】：

标签： reactjs key-bindings draftjs react-draft-wysiwyg

【解决方案1】：

试试这个：

const keyBindingFn = (event) => {
    if (event.ctrlKey && event.keyCode == 13) {
      if (event.nativeEvent.shiftKey) return console.log("event", event);
    }
    return getDefaultKeyBinding(event);
  };

【讨论】：

是的。你在这两个地方都改变了吗？
我添加了我的包，我想是因为使用草稿所见即所得，你有什么想法
注意到草稿所见即所得中的相同错误。如果按下 ctrl+enter ，由于某种原因，看起来库会保留 ctrl 的 keyCode。
github-issue 开了一个帖子希望他们看看。
@HamidShoja 决定暂时绕过整个 keyBindingFn 并暂时使用正常的反应文档侦听器，这似乎有效。如果你也想解决这个问题so-thread

【解决方案2】：

通常您可以使用draft-js 库中的全部功能。 react-draft-wysiwyg 只是对 Draft-js 的一个包装，它 src 可能有助于更深入地理解它。例如，keyBindingFn 函数已经在那里实现了，如果你添加自己的同名函数，它应该添加到编辑器的末尾（传播其余的道具和覆盖也应该包括在那里）

【讨论】：