DraftJS：按下回车键后重置blockType

我之前做类似Medium编辑器的时候也遇到过这个问题，核心就是要拦截回车键的默认继承行为，手动指定新块的类型。下面分两种常见的编辑器框架给你具体方案：

如果你用的是 Draft.js（最常用的Medium克隆技术栈） #

Draft.js 默认会让新块继承当前块的类型，我们可以通过重写 handleKeyCommand 函数来修改这个逻辑：

1. 首先在你的编辑器组件里定义自定义的按键处理函数：

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

const handleKeyCommand = (command, editorState) => {
  // 只处理回车键对应的命令
  if (command === 'insert-newline') {
    const currentContent = editorState.getCurrentContent();
    const selection = editorState.getSelection();
    const currentBlockKey = selection.getStartKey();
    const currentBlock = currentContent.getBlockForKey(currentBlockKey);

    // 判断当前块是否不是默认的unstyled类型
    if (currentBlock.getType() !== 'unstyled') {
      // 1. 拆分当前块（默认会生成同类型的新块）
      let newContent = Modifier.splitBlock(currentContent, selection);
      // 2. 获取新生成的块的key
      const newBlockKey = Array.from(newContent.getBlockMap().keys()).find(key => key !== currentBlockKey);
      // 3. 把新块的类型强制改成unstyled
      newContent = Modifier.setBlockType(
        newContent,
        new SelectionState({ anchorKey: newBlockKey, focusKey: newBlockKey }),
        'unstyled'
      );
      // 4. 更新编辑器状态，标记命令已处理
      const newEditorState = EditorState.push(editorState, newContent, 'split-block');
      this.setState({ editorState: newEditorState });
      return 'handled';
    }
  }
  // 其他命令交给默认逻辑处理
  return 'not-handled';
};

2. 把这个函数传给 Editor 组件的 handleKeyCommand 属性：

<Editor
  editorState={this.state.editorState}
  onChange={this.handleChange}
  handleKeyCommand={handleKeyCommand}
  // 其他属性...
/>

这个方案的效果是：不管你在标题块的哪个位置按回车，拆分后的新块都会变成默认的unstyled类型，原标题块的内容保留不变。

如果你用的是 Slate.js（更灵活的现代富文本框架） #

Slate.js 的处理逻辑类似，通过监听 onKeyDown 事件来拦截回车行为：

const onKeyDown = (event, editor) => {
  if (event.key === 'Enter') {
    // 获取当前选中的非paragraph类型节点（比如标题）
    const [currentNode] = editor.nodes({ match: n => n.type !== 'paragraph' });
    if (currentNode) {
      // 手动插入一个空的paragraph（对应unstyled）节点
      editor.insertNode({ type: 'paragraph', children: [{ text: '' }] });
      // 阻止默认行为，避免继承当前块类型
      event.preventDefault();
    }
  }
};

// 在Editor组件中使用
<Slate editor={editor} initialValue={initialValue} onKeyDown={onKeyDown}>
  {/* 渲染组件... */}
</Slate>

通用思路总结 #

不管用哪个框架，核心逻辑都是这三步：

• 监听回车键触发的事件/命令
• 判断当前激活的块是否是需要替换类型的非默认块（比如标题、引用等）
• 手动创建一个默认unstyled类型的新块，替换掉编辑器默认生成的继承类型块

这样就能实现你要的效果：从标题块按回车后，新块自动变回普通文本块。

内容的提问来源于stack exchange，提问作者n9iels