支持 Material UI 组件的 React WYSIWYG 编辑器答案

【问题标题】：React WYSIWYG editor with Material UI components support支持 Material UI 组件的 React WYSIWYG 编辑器
【发布时间】：2020-02-25 06:06:58
【问题描述】：

所以我正在构建一个仪表板，允许客户使用所见即所得的编辑器编写一些文本并将其发布，以便在在线阅读器中可用。

以前，我将 TinyMCE 集成为我的文本编辑器，它运行良好。它从文本生成 HTML 并格式化用户输入。现在，我需要允许客户端能够将一些 Material-UI 组件（例如 ExpansionPanel）添加到他们的内容中（可能通过单击文本编辑器工具栏中的按钮）。

我偶然发现了mui-rte，它允许以我想要的方式添加自定义组件，但它似乎只生成我不熟悉的草稿 js 格式，并且不会向后兼容已经生成的 HTML 字符串客户。

我的问题是，如何使用所见即所得编辑器生成以下格式的 HTML 字符串

<div>
 <h1>this is some text</h1>
 <ExpansionPanel></ExpansionPanel>
</div>

【问题讨论】：

【解决方案1】：

有一个名为 draftjs-to-html 的模块。为了从所见即所得编辑器中获取 html，您可以编写类似这样的内容。

import draftToHtml from 'draftjs-to-html';

console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));

convertToRaw 来自 Draft-js editorState.getCurrentContent() 来自编辑器中的状态更改事件，该事件记录在所见即所得的文档中。

【讨论】：