在draftjs代码块中按ctrl + return后如何转到下一行

Question

嗨朋友们，我正在与draftjs斗争，我正在使用reactjs与draftjs和draftjs-to-code来构建丰富的文本编辑器，我想在文本编辑器中实现编写代码，因为我正在使用draftjs-to-code，好处是它按 return 后转到新行并且不留下代码块，但我想在按 ctrl + return 后转到下一行并保留代码块，用户能够编写简单的文本

我希望用户按 ctrl + return 后光标移动到下一行并且用户能够编写简单的文本

Answer 1

听起来您想在 Draft.js 编辑器中实现一项功能，其中按 Ctrl + Return 将光标移动到下一行并离开代码块。

您可以创建一个自定义键绑定函数来检查是否按下了 Ctrl + Return。如果是，您可以操纵编辑器状态来创建一个“无样式”类型的新块，这将允许用户编写简单的文本1。

这是一个示例实现：

import { EditorState, Modifier, getDefaultKeyBinding } from 'draft-js';

function keyBindingFn(event) {
  if (event.ctrlKey && event.keyCode === 13) {
    return 'ctrl+return';
  }
  return getDefaultKeyBinding(event);
}

function handleKeyCommand(command, editorState) {
  if (command === 'ctrl+return') {
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const newContentState = Modifier.splitBlock(contentState, selection);
    const newEditorState = EditorState.push(editorState, newContentState, 'split-block');
    this.setState({ editorState: newEditorState });
    return 'handled';
  }
  return 'not-handled';
}

// In your Editor component
<Editor
  editorState={this.state.editorState}
  handleKeyCommand={handleKeyCommand}
  keyBindingFn={keyBindingFn}
  onChange={this.onChange}
/>

在此代码中，keyBindingFn 检查是否按下了 Ctrl + Return，如果是，则返回命令字符串“ctrl+return”handleKeyCommand 检查命令是否为“ctrl+return”，如果是，则在当前光标位置分割块，创建一个新的“无样式”块1。

请记住将 this.state.editorState 和 this.onChange 替换为您自己的编辑器状态并更改处理程序。