How can I get input data from mui-rte editor?

Question

I am working on a Q& A platform in which I used mui-rte to implement the form--Just like in the one I am typing right now. My problem is that I dont know how to get the data without having to click on the shipped "save" button.

Alternative, how can I get to implement a rte like this one in react? Functionalities needed: Math symbols, code editor, plain text

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 - takes an array of strings for the controls you want eg. "title" | "bold" | "italic" | "underline" | "link" | "numberList" | "bulletList" | "quote" | "code" | "clear" | "save" | "media" | "strikethrough" | "highlight"

Here I am storing the RTE content object as string but thats up to you if you like to store the object as it is.