How to setup TinyMCE + React

#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

Top comments (7)

CZHachery • Jun 3 '21

Hi! This is very helpful but I am getting Not Found errors when trying to import the needed folders into my React app. I am using webpack and it doesn't seem to find all the folders like plugins, themes, icons, etc. Have you ever had this issue? Thanks!

Melvin Waller Jr • Jun 28 '22

Thanks for the information. This is very close but a couple errors are preventing it from working. Need to add another import:
import 'tinymce/models/dom/model';

And then onEditorChange={this.handleEditorChange} should be onEditorChange={handleEditorChange}

With those two changes it then loads and works. Thanks again!