如何在Draft.js的EditorState开头插入指定格式的内容？

问题分析 #

你的现有代码能实现内容插入和换行，但存在三个核心问题：

• 内容插入位置依赖当前光标选区，无法固定在开头
• 未给插入文本添加斜体样式
• 光标最终定位到了内容末尾，不符合需求

修正后的代码实现 #

insertContent = (content: string) => {
  const { editorState } = this.state;
  const currentContent = editorState.getCurrentContent();
  
  // 创建指向内容最开头的选区
  const startSelection = SelectionState.createEmpty(currentContent.getFirstBlock().getKey());
  
  // 插入带斜体样式的内容
  const updatedContent = Modifier.replaceText(
    currentContent,
    startSelection,
    content,
    undefined,
    { italic: true } // 应用斜体行内样式
  );
  
  // 生成插入后的EditorState，光标默认在新内容末尾
  let newEditorState = EditorState.push(editorState, updatedContent, 'insert-characters');
  
  // 在光标位置插入软换行
  newEditorState = RichUtils.insertSoftNewline(newEditorState);
  
  // 将光标回退到换行前（新内容的末尾）
  const postInsertSelection = newEditorState.getSelection();
  const adjustedSelection = postInsertSelection.merge({
    anchorOffset: postInsertSelection.getAnchorOffset() - 1,
    focusOffset: postInsertSelection.getFocusOffset() - 1,
  });
  newEditorState = EditorState.forceSelection(newEditorState, adjustedSelection);
  
  this.setState({ editorState: newEditorState });
};

关键步骤说明 #

1. 固定插入到开头：通过SelectionState.createEmpty(currentContent.getFirstBlock().getKey())创建指向内容第一个块开头的选区，确保内容始终插入到最前面。
2. 添加斜体样式：在Modifier.replaceText的第五个参数中传入{ italic: true }，给插入的文本添加斜体行内样式。
3. 正确定位光标：插入内容后光标默认在新内容末尾，插入软换行后光标会移动到换行后的位置，通过merge调整选区偏移量，将光标回退到新内容的末尾，实现新内容[光标位置]\n原有内容的结构。

原代码问题总结 #

• 使用当前光标选区currentSelection导致插入位置不固定
• 未设置行内样式参数，无法实现斜体效果
• 调用EditorState.moveFocusToEnd将光标定位到内容末尾，不符合需求

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