This is my react code.
import React, { useState, useRef } from "react";
import { Editor } from '@tinymce/tinymce-react';
const PostBlog = () => {
const editorRef = useRef(null);
const [description, setDescription] = useState("");
const log = () => {
if (editorRef.current) {
setDescription(editorRef.current.getContent());
console.log(description);
}
};
return(
<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>
)
When I click on ‘Log editor content’ I get the output with HTML tags. As the initial value of TinyMCE editor is ‘
This is the initial content of the editor.
‘, The output I get is the same with HTML tags, but I want the output as text without HTML tags
>Solution :
You can use this cleanup function to remove the HTML tags from a string
const cleanup = (input) => {
const div = document.createElement('div');
div.innerHTML = input;
return div.innerText;
};