DEV Community

Rafaela Araújo
Rafaela Araújo

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
czhach profile image
CZHachery

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!

Collapse
 
melvinwallerjr profile image
Melvin Waller Jr

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!

Collapse
 
manoharreddyporeddy profile image
Manohar Reddy Poreddy

thanks

Collapse
 
viniciusersouza profile image
Vinicius

Very helpful, Rafaela. Thanks a lot.

Collapse
 
bluefatter profile image
bluefatter • Edited

This really help me out, Thanks 🥳

Collapse
 
elissonmichael profile image
Élisson Michael

Thanks for sharing.

Collapse
 
rubenlux profile image
rubenlux

from the app component can I use in other components?
Is it necessary to make the configuration in the component to use?