reactjs - 如何从 mui-rte 编辑器获取输入数据？

Question

我正在使用 mui-rte 的问答平台工作实现表单——就像我现在正在输入的表单一样。我的问题是我不知道如何获取数据，而无需单击随附的“保存”按钮。

替代方案，我怎样才能在 react 中实现这样的 rte？所需功能:数学符号、代码编辑器、纯文本

Answer 1

import MUIRichTextEditor from 'mui-rte'
import { convertToRaw } from 'draft-js'

const yourComponent = () => {

const [value, setValue] = setState('')

const onEditorChange = event => {
  const plainText = event.getCurrentContent().getPlainText() // for plain text
  const rteContent = convertToRaw(event.getCurrentContent())) // for rte content with text formating
  rteContent && setValue(JSON.stringify(rteContent)) // store your rteContent to state
}

 return (
   <MUIRichTextEditor
     label="Your label"
     controls={['numberList', bulletList ]}
     value={value}
     onChange={onEditorChange}
   />
 )
}

controls - 为你想要的控件获取一个字符串数组例如。“标题” | “粗体” | “斜体” | "下划线"| “链接” | "数字列表"|"子弹列表"| "报价"| “代码” | “清楚” | “保存” | “媒体” |“删除线” | “高亮”

在这里，我将 RTE 内容对象存储为字符串，但如果您想按原样存储对象，这取决于您。