Create a TinyMCE Rich Text Editor in React

So far we have seen many Editor Frameworks and their usage guides.

May be the simplest of all Editor libraries for React is TinyMCE.

Let’s quickly setup a React project and install the Tiny dependencies.

npx create-react-app myapp
yarn add @tinymce/tinymce-react

Make sure all the dependencies and peer dependencies properly added. Using the Editor component we can setup the editor, similar to draft-js.

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

const TinyMceEditor = () => {
  return (
    <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 }"
      }}
    />
  );
};

export default TinyMceEditor;

The configuration was quick, and it is easier to use.

Open the example in Sandbox.

• Create Quill RichText editor using react-quill
• How to get HTML from Remirror editor in Reactjs
• How to get state as JSON from Remirror editor in Reactjs
• Create a TinyMCE Rich Text Editor in React
• Create a Slate Rich Text Editor in React
• Create a Material-UI Rich Text Editor in React
• Create a RichText editor using Quilljs
• Create minimal editor with Tiptap in React
• Create a Social Editor using Remirror toolkit in React
• Create a RichText Editor using Remirror toolkit in React