如何从 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}
   />
 )
}

控件 - 接受您想要的控件的字符串数组，例如。“标题” | “大胆”| “斜体”| “下划线” | “链接” | “数字列表”| “项目符号列表”| “报价” | “代码”| “清晰”| “保存” | “媒体”| “删除线”| “强调”

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