Key Bindings(按键绑定)

Editor 组件通过 keyBindingFn 这个 props 参数，提供了灵活的「自定义按键绑定」功能。它允许你在你的编辑器里能匹配按键去控制你的行为。

默认快捷键

默认的按键绑定函数是 getDefaultKeyBinding。

由于 Draft.js 严格控制 DOM 的渲染和行为，故基本的编辑命令需要通过按键绑定系统实现。
getDefaultKeyBinding 将已知的系统级别的编辑器命令映射到 DraftEditorCommand 字符串，该字符串决定了处理组件的行为。
例如，Ctrl+Z (Win) 和 Cmd+Z (OSX) 对应 ‘undo’ (撤销)命令，组件收到 ‘undo’ (撤销)命令就会执行EditorState.undo()。

自定义快捷键

您可以使用自定义按键绑定函数来提供自定义的快捷键命令。

推荐使用 getDefaultKeyBinding 作为默认方案，这样你的编辑器可能受益于默认命令。

为了使用自定义命令字符串，您可以写一个 handleKeyCommand prop 函数，该函数允许您将该命令字符串映射到所需的行为。 如果 handleKeyCommand 函数返回 ‘handled’，则该命令被视为已处理。 如果它返回 ‘not-handled’，则该命令将通过(进入默认按键处理程序) 。

示例

假如我们有个编辑器，需要将内容定期「保存」到服务器上。

首先，我们定义一个按键绑定函数 keyBindingFn ：

import { getDefaultKeyBinding, KeyBindingUtil } from 'draft-js';
const { hasCommandModifier } = KeyBindingUtil;
function myKeyBindingFn(e: SyntheticKeyboardEvent): string {
    if (e.keyCode === 83 /* `S` key */ && hasCommandModifier(e)) {
        return 'myeditor-save';
    }
    return getDefaultKeyBinding(e);
}

我们的函数接收一个按键事件，之后我们检查它是否匹配我们的条件：首先必须是 ‘s’ 按键，之后它必须有一个命令修饰符(例如，在 OSX 上是 ‘cmd’，在 windows 上是 ‘ctrl’ ).
如果该按键是匹配的，则返回一个我们指定的命令名称。否则，使用默认的按键绑 getDefaultKeyBinding。

在我们的编辑器组件中，我们可以使用 handleKeyCommand 这个 prop 参数:

import { Editor } from 'draft-js';
class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.handleKeyCommand = this.handleKeyCommand.bind(this);
  }
  // ...
  handleKeyCommand(command: string): DraftHandleValue {
    if (command === 'myeditor-save') {
      // 这里可以发送个保存内容的请求，设置个新的 editorState 等等
      return 'handled';
    }
    return 'not-handled';
  }
  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        handleKeyCommand={this.handleKeyCommand}
        keyBindingFn={myKeyBindingFn}
        ...
      />
    );
  }
}

'myeditor-save' 命令能够被用来做一些自定义操作，之后返回 ‘handled’ 来告诉编辑器，这个命令已经被处理了不需要再做其它操作了。
通过默认返回 'not-handled' , 默认处理程序就会去处理默认的行为。