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

Question

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

之前，我集成了 TinyMCE 作为我的文本编辑器，效果很好。它根据文本生成 HTML 并格式化用户输入。现在，我需要允许客户端能够向其内容添加一些 Material-UI 组件，例如 ExpansionPanel（可以通过单击文本编辑器工具栏中的按钮）。

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

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

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

Answer 1

有一个名为 Draftjs-to-html 的模块。为了从所见即所得编辑器获取 html，你可以写这样的东西。

import draftToHtml from 'draftjs-to-html';

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

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