How to use tinymce with react (in 2022)

TinyMCE the open source WYSIWYG editor of choice

The WYSIWYG editor known, and loved, by millions of developers worldwide. TinyMCE is built to fit seamlessly into your product or website. From workflow automation to email builders and more, TinyMCE is the professional development team editor of choice.

It can be integrated into many different framework, like tinymce for angular, vue.js and many others.

Let's see how fast and easily we can start with the tinymce with react integration

Let's create a simple react application:

npx create-react-app tinymce-react-demo

Add the Tinymce library to the application , first jump into the new applciation folder, and add the library

 npm install --save @tinymce/tinymce-react

Now, everything is ready to rock, let's put some code into the app.js file

 import React, { useRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';

 export default function App() {
   const editorRef = useRef(null);
   const log = () => {
     if (editorRef.current) {
       console.log(editorRef.current.getContent());
     }
   };
   return (
     <>
       <Editor
         onInit={(evt, editor) => editorRef.current = editor}
         initialValue="

"
         init={{
           height: 500,
           menubar: false,
           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 onClick={log}>Log editor content</button>
     </>
   );
 }

At this point, you can use the editor.

Some pain points, happend during the development:

I want to go with the local version of the tinymce script, not with the cloud, so i try to switch with the:

tinymceScriptSrc attribute, but it's gone very bad:

Uncaught SyntaxError: Unexpected token '<'
Uncaught Error: tinymce should have been loaded into global scope

I spent a lot of time with googleing, why this is a problem with tinymce for react, maybe other framework is working fine. 

This is happening because the give path is wrong, and the real file is not there, the unexpected token is because with got somereact page instead of the real 404 error, and the system expects script code in the file, not html tags.

The second line of the error coming because no tinymce loaded, and the editor want to spin up, so the solution is very easy, just corrent the file path, with /tinymce.min.js , you need to put the tinymce files into the public folder of the react folder stucture.

you can reach the sample at my github:

https://github.com/CurtisVayne/TinymceTutorials

Also you can check the tinymce .net core image uploader article here

Tinymce for Angular quick startup article can be found here