How to setup TinyMCE + React

Recently I had to setup TinyMCE with React in a project. I hope this post could help you. I had some issues trying to do this, and would like to share with you how I did it.

First of all, you need to download the packages for tinymce and the wrapper for reac:

npm install tinymce
npm install --save @tinymce/tinymce-react

And then you are able to start. In order to have TinyMCE self hosted available, you need to import in your React component all the packages that you are going to use.

 import React, { useState } from 'react';
 import 'tinymce/tinymce';
 import 'tinymce/icons/default';
 import 'tinymce/themes/silver';
 import 'tinymce/plugins/paste';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/image';
 import 'tinymce/plugins/table';
 import 'tinymce/skins/ui/oxide/skin.min.css';
 import 'tinymce/skins/ui/oxide/content.min.css';
 import 'tinymce/skins/content/default/content.min.css';
 import { Editor } from '@tinymce/tinymce-react';

 const App = () => {
   const [contentEditor, setContentEditor] = useState();
   const handleEditorChange = (content, editor) => {
     console.log('Content was updated:', content);
     setContentEditor(content);
   }

   return (
     <Editor
         initialValue="<p>This is the initial content of the editor</p>"
         init={{
           skin: false,
           content_css: false,
           height: 500,
           menubar: false,
           plugins: [
             'link image',
             'table paste'
           ],
           toolbar:
             'undo redo | formatselect | bold italic backcolor | \
             alignleft aligncenter alignright alignjustify | \
             bullist numlist outdent indent | removeformat | help'
         }}
         value={contentEditor}
         onEditorChange={this.handleEditorChange}
       />
     );
   }

 export default App;

On the init prop you have to set skin: false, and also content_css: false, so you can get the css you have downloaded from the packages.

To use the component as a controlled component, use the onEditorChange prop instead of the onChange props, and you need to have a state to set the content on it.

That is it, I hope you find this article useful. Thanks for reading!

References:
https://www.tiny.cloud/docs/integrations/react/
https://github.com/tinymce/tinymce-react

Blog

How to setup TinyMCE + React

Rafaela Araújo

Join Our Newsletter. No Spam, Only the good stuff.

Related