Key Bindings 按键绑定

The Editorcomponent offers flexibility to define custom key bindings for your editor, via the keyBindingFnprop. This allows you to match key commands to behaviors in your editor component.

Editor组件通过keyBindingFnprop，提供了给你的编辑器绑定自定义按键的灵活性。这允许在你的编辑器组件里匹配按键指令行为。

默认

The default key binding function is getDefaultKeyBinding.

默认的按键绑定方法是getDefaultKeyBinding。

Since the Draft framework maintains tight control over DOM rendering and behavior, basic editing commands must be captured and routed through the key binding system.

因为Draft框架坚持紧密的控制DOM渲染和行为，基础的编辑指令必须被捕获，并且要通过按键绑定系统的路由。

getDefaultKeyBindingmaps known OS-level editor commands to DraftEditorCommandstrings, which then correspond to behaviors within component handlers.

getDefaultKeyBinding映射了已知的系统级编辑器指令到DraftEditorCommand字符串，对应了组件处理中的行为。

For instance, Ctrl+Z (Win) and Cmd+Z (OSX) map to the 'undo' command, which then routes our handler to perform an EditorState.undo().

例如，Ctrl+Z（windows系统）和Cmd+Z（OSX系统）映射到了‘undo’（撤销）指令，按照我们的处理路线，会执行一个EditorState.undo()。

自定义

You may provide your own key binding function to supply custom command strings.

你可以提供你自己的按键绑定方法，以支持自定义指定字符串。

It is recommended that your function use getDefaultKeyBindingas a fall-through case, so that your editor may benefit from default commands.

建议你的方法使用getDefaultKeyBinding作为一个落空方案，这样你的编辑器也许会从默认指令中受益。

With your custom command string, you may then implement the handleKeyCommandprop function, which allows you to map that command string to your desired behavior. If handleKeyCommandreturns 'handled', the command is considered handled. If it returns 'not-handled', the command will fall through.

使用你的自定义指令字符串，你可以实现handleKeyCommand属性方法，它允许你映射指令字符串到你期望的行为上。如果handleKeyCommand返回‘handled’，这个指令就被认为处理完毕了。如果它返回‘not-handled’，这个指令会落空。

例子

Let's say we have an editor that should have a "Save" mechanism to periodically write your contents to the server as a draft copy.

假设我们有一个编辑器，它应该有一个“保存”机制来定期的记录你的内容，作为Draft的一份拷贝，到服务器上。

First, let's define our key binding function:

首先，让我们定义我们的按键绑定方法：

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

Our function receives a key event, and we check whether it matches our criteria: it must be an S key, and it must have a command modifier, i.e. the command key for OSX, or the control key otherwise.

我们的方法会接收一个按键事件，然后我们检查它是否匹配我们的标准：它必须是一个S按键，并且它必须有一个指令修饰器，例如，OSX的command按键，或者是control按键。

If the command is a match, return a string that names the command. Otherwise, fall through to the default key bindings.

如果这个指令是匹配的，那么返回一个命名了这个指令的字符串。否则，落空到默认的按键绑定上。

In our editor component, we can then make use of the command via the handleKeyCommandprop:

在我们的编辑器组件中，我们可以通过handleKeyCommand属性应用指令：

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') {
      // Perform a request to save your contents, set
      // a new `editorState`, etc.
      // 执行一个保存内容的请求，设置一个新的 'editorState'，诸如此类
      return 'handled';
    }
    return 'not-handled';
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        handleKeyCommand={this.handleKeyCommand}
        keyBindingFn={myKeyBindingFn}
        ...
      />
    );
  }
}

The 'myeditor-save' command can be used for our custom behavior, and returning 'handled' instructs the editor that the command has been handled and no more work is required.

这个“myeditor-save”指令可以被我们的自定义行为使用并返回“handled”，这会指示编辑器指令已经被处理，没有更多工作需要做了。

By returning 'not-handled' in all other cases, default commands are able to fall through to default handler behavior.

在所有其他情况中，通过返回“not-handled”，使默认指令能够落空到默认的处理行为中。