Draft 文档翻译 - 高级主题 - Key 绑定

Key 绑定

编辑器组件提供了灵活性，可以通过keyBindingFn支持为编辑器定义自定义键绑定。这允许您将键命令与编辑器组件中的行为相匹配。

默认

默认的按键绑定函数是 getDefaultKeyBinding

由于Draft 框架保存对DOM的渲染和行为的严格控制。

基础的编辑器命令必须 捕获和路由通过 key绑定系统。

getDefaultKeyBinding将已知的操作系统级编辑器命令映射到DraftEditorCommand字符串，然后对应于组件处理程序中的行为。

例如，Ctrl + Z（Win）和Cmd + Z（OSX）映射到“撤销”命令，然后路由我们的处理程序执行一个 EditorState.undo（）。

定制

您可以提供自己的键绑定功能来提供自定义命令字符串。

建议您的函数使用getDefaultKeyBinding作为通过的情况，这样您的编辑器可能会受益于默认命令。

使用您的自定义命令字符串，您可以实现handleKeyCommand prop函数，该函数允许您将该命令字符串映射到所需的行为。如果handleKeyCommand返回'processed'，则该命令被视为处理。 如果它返回“未处理”，则命令将通过。

举例

假设我们有一个编辑器应该有一个“保存”机制来定期将您的内容作为草稿复制到服务器上。

首先，我们来定义我们的键绑定功能：

import {getDefaultKeyBinding, KeyBindingUtil} from 'draft-js'
const {hasCommandModifier} = keyBindingUtil;

function myKeyBindingFn(e: SyntheticKeyBoardEvent): string {
    if (e.keyCode ===83 && hasCommandModifier(e)) {
        return 'myeditor-save';
    }
    return getDefaultKeyBinding(e)
}

我们的函数接收到一个关键事件，我们检查它是否符合我们的标准：它必须是一个S键，它它必须有一个 Ctrl，即OSX的命令键，否则是控制键。

如果命令是匹配的，则返回一个命名该命令的字符串。 否则，通过默认键绑定。

在我们的编辑器组件中，我们可以通过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'){
            return 'handle';
        }
        return 'not-handle';
    }

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

“myeditor-save”命令可以用于我们的自定义行为，并且返回“handle”指示编辑器已经处理了命令，并且不需要更多的工作。

通过在所有其他情况下返回“未处理”，默认命令可以通过默认处理程序行为。