I'm storing the TinyMCE editor text in MongoDB using react and node. When I retrieve the data from MongoDB I'm not getting the text as expected. For example:
I text I wrote in TinyMCE is like this:

The output I'm getting is the only simple plain text:

This is the react that I wrote for posting text in MongoDB:
import React, { useState, useRef } from "react";
import { Editor } from '@tinymce/tinymce-react';
import axios from "axios";
const PostBlog = () => {
const fileInput = useRef(null);
const [description, setDescription] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
const formData = new FormData();
formData.append('description',description);
axios.post('/blog/posts',formData).then((res) => {
console.log(res.body);
console.log('successfully posted');
});
window.alert("added successfully");
}
const editorRef = useRef(null);
const cleanUp = (input) =>{
const div = document.createElement('div');
div.innerHTML = input;
return div.innerText;
}
const log = () => {
if (editorRef.current) {
const text = cleanUp(editorRef.current.getContent());
setDescription(text);
console.log(description);
window.alert('Description added successfully');
}
};
return (
<div className="postblog">
<form onSubmit={handleSubmit}>
<div className="tinymce">
<Editor
apiKey="kwoypty9nsvg3at4nannkt6kla0ab2e0tp9wtux0f9u6oqpu"
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<p>This is the initial content of the editor.</p>"
init={{
forced_root_block:false,
selector:"textarea",
height: 200,
width: 740,
menubar: false,
toolbar: "bottom",
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}}
/>
<button type="button" onClick={log}>Log editor content</button>
</div>
<button type="submit">Post</button>
</form>
</div>
);
}
export default PostBlog;