如何在Draft.js中插入HTML？

Question

我正在使用react-draft-wysiwyg 编辑器，它构建在Draft.js 之上。我试图弄清楚如何以编程方式插入 HTML，例如：

<h1>Hey</h1>

到目前为止，我得到的最接近的是使用 Modifier 模块的 insertText() 方法。例子：

insert = ()=>{
  const editorState = this.state.editorState;

  const selection = editorState.getSelection();

  const contentState = editorState.getCurrentContent();

  const ncs = Modifier.insertText(contentState, selection, "<h1>Hey</h1>",);

  const es = EditorState.push(editorState, ncs, 'insert-fragment');

  this.setState({editorState: es})
}

这会导致插入文字字符串，而不是 HTML H1 元素。

如何做呢？

Answer 1

在此处的react-draft-wysiwyg编辑器插件文档中，最后提到，使用HTML To DraftJS库将纯 HTML 转换为 DraftJS 编辑器内容。

它是一个与react-draft-wysiwyg编辑器一起使用的插件。

此处链接到插件

import { EditorState, ContentState } from 'draft-js';
import htmlToDraft from 'html-to-draftjs';

const blocksFromHtml = htmlToDraft(this.props.content);
const { contentBlocks, entityMap } = blocksFromHtml;
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
const editorState = EditorState.createWithContent(contentState);