Table of Contents

IMPORTANT POINTS TO INTEGRATE TINYMCE REACT

This is the easiest and shortest way of integration of react tinymce.
We will download the absolutely free TinyMCE SDK and keep the tinymce’s tinymce.min.js in our project directory.
You can download the SDK from https://www.tiny.cloud/get-tiny/
We also need to install the tinymce-react package.

FOLLOW THE BELOW 5 STEPS AND YOU ARE DONE !!

Create a new React project named tinymce-react-integration using create-react-app command in the terminal.

1
2
3

npx create-react-app tinymce-react-integration
Go into the directory of newly created project

1
2
3

cd tinymce-react-integration
Install the tinymce-react package and save it to your package.json with –save.

1
2
3

npm install --save @tinymce/tinymce-react
Download and unzip the SDK and keep the content of tinymce/js folder from the downloaded zip file into the public folder of your project. Afterwards your project directory listing should be similar to below:

Now open ./src/App.js in any editor and replace the contents with:


import { Editor } from "@tinymce/tinymce-react";

export default function App() {
  return (
    <>
      <Editor
        tinymceScriptSrc={process.env.PUBLIC_URL + "/tinymce/tinymce.min.js"}
        initialValue="<p>This is the initial content of the editor.</p>"
        init={{
          height: 500,
          width: "100%",
          menubar: false,
          plugins: [
            "advlist",
            "autolink",
            "lists",
            "link",
            "image",
            "charmap",
            "anchor",
            "searchreplace",
            "visualblocks",
            "code",
            "fullscreen",
            "insertdatetime",
            "media",
            "table",
            "preview",
            "help",
            "wordcount",
          ],
          toolbar:
            "undo redo | blocks | " +
            "bold italic forecolor | alignleft aligncenter " +
            "alignright alignjustify | bullist numlist outdent indent | " +
            "removeformat | help",
          content_style:
            "#your_editor { font-family:Helvetica,Arial,sans-serif; font-size:35px }",
        }}
      />
    </>
  );
}

import { Editor } from "@tinymce/tinymce-react";

export default function App() {

return (

<Editor

tinymceScriptSrc={process.env.PUBLIC_URL + "/tinymce/tinymce.min.js"}

initialValue="<p>This is the initial content of the editor.</p>"

init={{

height: 500,

width: "100%",

menubar: false,

plugins: [

"advlist",

"autolink",

"lists",

"link",

"image",

"charmap",

"anchor",

"searchreplace",

"visualblocks",

"code",

"fullscreen",

"insertdatetime",

"media",

"table",

"preview",

"help",

"wordcount",

toolbar:

"undo redo | blocks | " +

"bold italic forecolor | alignleft aligncenter " +

"alignright alignjustify | bullist numlist outdent indent | " +

"removeformat | help",

content_style:

"#your_editor { font-family:Helvetica,Arial,sans-serif; font-size:35px }",

}}

</>

);

}

Now you can run your react app using command npm start and play around with the tinymce react example.

HOW TO CUSTOMIZE TINY MCE EDITOR IN REACT

TYPES OF TINYMCE EDITING MODES

Classic Full Editor Mode – This is the mos basic way of displaying the editor on your page. It embeds an iframe in the page which has the menu bar or toolbar for styling at the top and the content area for writing below the toolbar.
Inline Mode – This mode does not use an iframe, the editor runs on the selected HTML element. This mode has many options to customize the editor as per our need.
Distraction-free Mode – This mode is the extension of the Inline Mode with additional configuration to provide better functionality.

We have already seen the Classic Mode of Editor in the integration section above. Now lets look at the Inline Mode which has the better functionality as compared to basic Classic Mode.

SETTING UP THE INLINE EDITING MODE

The Inline mode is used mostly because it merges the editing and reading views so that when the user clicks on the content then only the editor and its styling toolbar appears and when the user clicks away from the editor in place then it becomes a simple text.
It does not replace the selected element with an iframe instead it edits the element’s content in-place itself.
This mode is designed in such a way that the editable content view is hidden until the content is selected or clicked.
You can also get rid of the tinymce logo in this mode, which appears in the Classic Mode at the bottom right of the editor.

EXAMPLE OF INLINE EDITING MODE

To enable the Inline mode, we need to set the inline option to true.
Its important to note that if you want the multiple instances of tinymce editor on a single page then maintain the unique id for each editor.
onEditorChange is the important property which allows us to get the content of the editor and then we can make our logic of saving the editor’s content. I have used handleEditorChange function to get the editor content.
If you want to show some initial value as soon as the editor loads then you can use the set that value in the initialValue property of the editor.
plugins property accepts the array of plugins. Plugins are useful to set if your menubar property is set to true because most of the plugins are visible in the menubar(it is shown in the classic mode picture above. MenuBar has options of File, Edit, View, Insert, Format) only.
toolbar is the main property of the editor which allows us to set the styling options in the editor’s toolbar like align text to center, font-size, font-family options etc.
content_style is the property for writing your own css to style the editor as per your need. I have used the id as #your_editor for writing the css for my editor whose id is “your_editor”.
I have also used the tinymce editor’s classes to change the style of the editor as per my need.

import { Editor } from "@tinymce/tinymce-react";
import { useState } from "react";

export default function App() {

const [value,setValue] = useState("");
const handleEditorChange = (val)=>{
 console.log("text in editor..",val);
 setValue(val); 
}
  return (
    
      <Editor
        tinymceScriptSrc={process.env.PUBLIC_URL + "/tinymce/tinymce.min.js"}
        // initialValue="<p>This is the initial content of the editor.</p>"
        id="your_editor"
        onEditorChange={handleEditorChange}
        init={{
          // toolbar_location: "top",
          inline: true,
          menubar: false,
          placeholder: "Write Text",
          plugins: ["lists"],
          toolbar: [
            "undo redo | blocks | bold italic underline | fontfamily forecolor backcolor ",
            "alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
          ],
          content_style:
            "#your_editor {width:50%; padding:10px 10px 10px 5px;font-family:Helvetica,Arial,sans-serif; font-size:35px;margin-top:100px;border:1px solid grey; } .mce-content-body::before {top:50%;transform:translateY(-50%);padding-left:5px} .tox :not(svg):not(rect) {font-size:16px !important;}",
        }}
      />
    
  );
}

import { Editor } from "@tinymce/tinymce-react";

import { useState } from "react";

export default function App() {

const [value,setValue] = useState("");

const handleEditorChange = (val)=>{

console.log("text in editor..",val);

setValue(val);

}

return (

<Editor

tinymceScriptSrc={process.env.PUBLIC_URL + "/tinymce/tinymce.min.js"}

// initialValue="<p>This is the initial content of the editor.</p>"

id="your_editor"

onEditorChange={handleEditorChange}

init={{

// toolbar_location: "top",

inline: true,

menubar: false,

placeholder: "Write Text",

plugins: ["lists"],

toolbar: [

"undo redo | blocks | bold italic underline | fontfamily forecolor backcolor ",

"alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",

content_style:

"#your_editor {width:50%; padding:10px 10px 10px 5px;font-family:Helvetica,Arial,sans-serif; font-size:35px;margin-top:100px;border:1px solid grey; } .mce-content-body::before {top:50%;transform:translateY(-50%);padding-left:5px} .tox :not(svg):not(rect) {font-size:16px !important;}",

}}

);

}

Must Read - Related Posts For You:

How To Do TinyMCE React Integration [Easy Step By Step Guide]