Draft.js将一个contentState插入另一个contentState

Question

我有一个HTML。的Draft.js编辑器。如何在当前选择位置插入新的HTML，同时保留样式和实体/块映射？我知道如何通过Modifier.insertText插入原始文本：

const contentState = Modifier.insertText(
  editorState.getCurrentContent(),
  editorState.getSelection(),
  insertionText,
  editorState.getCurrentInlineStyle(),
);

但是它将删除所有不正确的HTML。

// Original HTML piece
const { contentBlocks, entityMap } = htmlToDraft(originalHTML);
const contentState = ContentState.createFromBlockArray(
  contentBlocks,
  entityMap,
);
const editorState = EditorState.createWithContent(contentState);

// Additional HTML piece, which I want to insert at the selection (cursor) position of
// previous editor state
const { contentBlocks, entityMap } = htmlToDraft(newHTML);
const newContentState = ContentState.createFromBlockArray(
  contentBlocks,
  entityMap,
);

Answer 1

您可能应该为此使用Modifier.replaceWithFragment：

“片段”是程序框图的一部分，实际上只是一个OrderedMap，与ContentState对象的完整程序框图大致相同。此方法将用片段替换“目标”范围。

这将与Modifier.replaceWithFragment相同，除了需要为其提供一个块映射作为参数。从您的示例中还不能完全清楚insertText的返回值是什么，但是您应该可以：

• 直接使用返回值中的htmlToDraft
• 或在您的示例中创建contentBlocks，然后使用其contentState方法获取要插入到编辑器内容中的块图。

.getBlockMap()