1

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

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

因此，正如在这个问题和这里提到的那样，我这样写了我的代码，但它不能很好地工作。

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

我在编辑器道具中设置它的方式：

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

2 回答 2

0

尝试这个：

const keyBindingFn = (event) => {
    if (event.ctrlKey && event.keyCode == 13) {
      if (event.nativeEvent.shiftKey) return console.log("event", event);
    }
    return getDefaultKeyBinding(event);
  };
于 2020-05-14T15:32:35.237 回答
0

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

于 2021-12-02T16:19:36.077 回答