React JS
How to add TinyMCE as Rich Text Editor in your React project
May 15, 2021
1 min

How to add TinyMCE as Rich Text Editor in your React project

Hi! Lot of react developers facing a problem when they want to integrate advance text editor in their applications. Here is one of best solution for that scenario. It’s TincMCE.

TinyMCE 5 is a powerful and flexible rich text editor that can be embedded in web applications.

as per their official documentation.

So, Today I am going to expalin how TinyMCE setup in your react app and how to use it in step wise.

Step -1 —> Install TinyMCE in your Application

Here I am going to explain the way that TinyMCE install via Node Package Manager ( NPM ). Simply copy/paste this command in your terminal:

$ npm install tinymce

Step -2 —> Provide access to TinyMCE by self-hosting TinyMCE.

You can simply add following script tag into <head> or the end of the <body> of the HTML file, such as:

<script src="/path/to/tinymce.min.js"></script>

This can be added to .public/index.html file in your react app.

If This not works please copy the tinymce folder in node_modules and paste in into public folder and then add below script tag same as before.

<script src="%PUBLIC_URL%/tinymce/tinymce.min.js"></script>

Step -3 —> Install the tinymce-react package and save it to your package.json with --save.

Now you have access to TinyMCE from your application. Now add tiny-mce react package to your app by using following code.

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

Step - 4 —> Configure your custom text editor using TinyMCE

You can configure your text editor by using following code.

 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="<p>This is the initial content of the editor.</p>"
         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>
     </>
   );
 }

By using above code you can setup Basic TineMCE Text Editor

Now you have Advance text editor with your app. Here that can add photos, medias, links, etc. You can figure out more Premium and Non-Premium plugins and feature by their documentation.


Tags

Rich Text editorreactText EditorTinyMCE

Related Posts

Sass
Sass
Creating a pure-CSS progressbar in React.
July 05, 2020
1 min