Rich text editor in reactjs - reactjs

Question

How to create a rich text editor in Reactjs and save the value entered and show it in console/ save the value in a state and send it to php file ?
I have tried the below code but cannot save the value.
import React from 'react'
import { Editor } from "react-draft-wysiwyg";
import "../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
const TextEditor = () => {
return (
<div>
<Editor
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
wrapperStyle={{ width: 1000, border: "1px solid black" }}
/>
</div>
)
}
export default TextEditor

Answer 1

As far as the documentation goes -> https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp (Section properties, Editor state part)
You have a onChange property from which you can listen to and log the current value inside it:
function App() {
const [first, setfirst] = useState("")
console.log(first.blocks.map(x => x.text))
return (
<div>
<Editor
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
onChange={(e) => setfirst(e)}
/>
</div>
)
}
Or if you wish, you could also log the entire object.

Answer 2

const TextEditor = (props) => {
const [data, setData] = useState("")
const handleChange = (event) => {
setData(event)
}
const handleSubmit = (e) => {
e.preventDefault();
let myPara = data.blocks.map(x => { return x.text })
const sendData = {
pid: props.data,
para: myPara[0] //stores the entire text written in the text
//editor in 'para' which can then be stored
//in a db table
}
axios.post('http://localhost/api/texteditor.php', sendData)
.then((result) => {
if (result.data.Status === 'Invalid') {
alert('Invalid data');
}
else {
alert("Data added successfully");
}
})
}
return (
<div>
<form onSubmit={(e) => { handleSubmit(e) }}>
<Editor
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
wrapperStyle={{ width: 1000, border: "1px solid black" }}
onChange={handleChange}
/>
<input className='save d-flex justify-content-left'
type="submit" name="save" value="Save" style=
{{
backgroundColor: "white", color: "blue",
border: "1px solid blue"
}}
/>
</form>
</div>
)
}
export default TextEditor