MUI-RTE 将输入内容作为带有 HTML 标签的字符串答案

【问题标题】：MUI-RTE Getting the input content as string with HTML tagsMUI-RTE 将输入内容作为带有 HTML 标签的字符串
【发布时间】：2022-07-07 04:40:49
【问题描述】：

我有基于反应的应用程序和 mui 组件，在这种特殊情况下，我被困在 RTE 上。流程是：

首先，我得到这样的字符串：'<h1>Hello, {{name}}!</h1><p>this is test</p>'
我用 Draft-js 对其进行格式化，并将其作为 defaultValue 放入 MUI-RTE，一切都很好，它显示了所有样式。
其次，我希望 onSave/onChange 获取 MUI-RTE 的内容并将其与新更改一起保存（不管它们是什么），采用我收到的格式，例如'<h1>Hello {{name}}</h1><p>Updated Content</p>'

问题是我无法弄清楚如何获取包含所有标签的 RTE 类字符串的内容，它总是出现一些奇怪的响应，我无法正确解析或字符串化它。 ..

  const sample = '<h1>Hello, {{name}}!</h1><p>this is test</p>';
  const contentHTML = convertFromHTML(sample);
  const state = ContentState.createFromBlockArray(
    contentHTML.contentBlocks,
    contentHTML.entityMap,
  );
  const content = JSON.stringify(convertToRaw(state));

  <MUIRichTextEditor
    label=""
    defaultValue={content}
    //onSave={}
    // or
    //onChange={}
  />

【问题讨论】：

标签： reactjs material-ui rte

【解决方案1】：

尝试使用 draft-js-export-html 它对我有用

import { stateToHTML } from 'draft-js-export-html';

return ( 
 <YourComp 
   onChange={ value => stateToHTML(value.getCurrentContent()) }
  />
)

【讨论】：