Not getting the expected output by using TinyMCE in react

Viewed 154

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: enter image description here

The output I'm getting is the only simple plain text: enter image description here

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;
0 Answers
Related