富文本编辑器 draft.js(一)

键值绑定(翻译)

Editor组件通过keyBindingFn为你的编辑器提供了灵活地自定义键值绑定。

默认:

getDefaultKeyBinding默认键值绑定函数。

因为draft框架严格控制DOM渲染和行为,基本编辑命令必须通过键值绑定系统捕获和转换。

getDefaultKeyBinding与已知命令DraftEditorCommand字符串os级别的编辑器相匹配,这个字符串对应了组件处理的行为。

例如,Ctrl + Z(Win)和Cmd + Z(OSX)映射到“撤消”命令,然后交给处理程序执行EditorState.undo()。

定制:

你可以提供你自己的键值绑定函数来提供定制命令字符串。

建议你的函数使用getDefaultKeyBinding作为获取定制失败的选择,这样你可能受益于默认的命令。

使用您的自定义命令字符串,您可以实现handleKeyCommand属性功能,它允许您使用字符串映射到你想要的行为。如果handleKeyCommand返回“处理”,被认为是处理的命令。如果它返回“未处理”,被认为是未处理的命令。

例子

假设我们可以先预存一个myeditor-save的键值绑定命令

首先,让我们定义键值绑定功能:

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键,(keycode83对应键盘上的 S)并且它必须有一个命令修饰符,即在OSX里面是 cmd,其他的则为 ctrl 控制键。

即 OSX 为 cmd+S ,WIN 为 ctrl+S,

如果命令是一个匹配,返回一个字符串的命令名称。否则,使用默认的键值绑定。

在我们的编辑器组件,我们可以利用命令通过handleKeyCommand属性:

import {Editor} from "draft-js";
class MyEditor extends React.Component {
  // ...

  handleKeyCommand(command: string): DraftHandleValue {
    if (command === "myeditor-save") {
      // Perform a request to save your contents, set
      // a new `editorState`, etc.
      return "handled";
    }
    return "not-handled";
  }

  render() {
    return (
      
    );
  }
}

“myeditor-save”命令可用于我们的习惯行为,并返回“handled” 告诉编辑器命令已经被处理了.

通过返回"not-handled"的情况下,默认的命令能够使用默认处理行为。