The best WYSIWYG rich text
editor for React

1import React, { useRef } from 'react';
2import { Editor } from '@tinymce/tinymce-react';
3
4export default function App() {
5    const editorRef = useRef(null);
6    const log = () => {
7    if (editorRef.current) {
8        console.log(editorRef.current.getContent());
9    }
10  };
11  return (
12    <>
13    <Editor
14        onInit={(evt, editor) => editorRef.current = editor}
15        initialValue="<p>This is the initial content of the editor.</p>"
16        init={{
17        height: 500,
18        menubar: false,
19        plugins: [
20           'a11ychecker','advlist','advcode','advtable','autolink','checklist','export',
21           'lists','link','image','charmap','preview','anchor','searchreplace','visualblocks',
22           'powerpaste','fullscreen','formatpainter','insertdatetime','media','table','help','wordcount'
23        ],
24        toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
25           'alignleft aligncenter alignright alignjustify | ' +
26           'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help'
27        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
28        }}
29    />
30    <button onClick={log}>Log editor content</button>
31    </>
32  );
33}