嘿，我懂你现在的困扰——你用Modifier.insertText()插入HTML字符串，结果编辑器把它当成纯文本显示了，完全没渲染成H1标题对吧？这很正常，因为insertText()本来就是用来插入纯文本的，没法识别HTML标签。要实现插入带格式的HTML内容，得先把HTML转换成Draft.js能识别的ContentState结构才行，我给你一步步说解决方案：

步骤1：安装HTML转换工具库 #

Draft.js本身没有内置HTML解析功能，我们可以用draft-js-import-html这个现成的库来帮我们把HTML转换成Draft的内容结构。先安装它：

npm install draft-js-import-html
# 或者用yarn
yarn add draft-js-import-html

步骤2：修改插入逻辑 #

替换你原来的insert方法，改成下面这样：

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

insert = () => {
  const { editorState } = this.state;
  const selection = editorState.getSelection();
  const currentContent = editorState.getCurrentContent();

  // 把目标HTML转换成Draft.js的ContentState
  const htmlContentState = stateFromHTML("<h1>Hey</h1>");
  // 提取转换后的内容片段（包含格式信息）
  const contentFragment = htmlContentState.getBlockMap();

  // 用replaceWithFragment插入带格式的内容片段
  const newContentState = Modifier.replaceWithFragment(
    currentContent,
    selection,
    contentFragment
  );

  // 更新EditorState并设置回状态
  const newEditorState = EditorState.push(
    editorState,
    newContentState,
    'insert-fragment'
  );

  this.setState({ editorState: newEditorState });
};

关键说明 #

• stateFromHTML()会自动把HTML标签转换成Draft.js对应的样式：比如<h1>会被转换成带有header-one块样式的内容，<b>会转换成BOLD行内样式，完全符合编辑器的格式要求
• 这个方法支持复杂HTML结构，比如段落、列表、嵌套样式都能正确解析
• 如果不想额外依赖库，你也可以手动构建ContentBlock数组，但这个过程非常繁琐，需要自己处理每个HTML标签对应的Draft样式，不推荐

内容的提问来源于stack exchange，提问作者i.brod