Lazy-loading TinyMCE from a .zip package in React

This guide shows how to self-host and lazy-load TinyMCE from a .zip package into a React application using the TinyMCE React component.

Prerequisites

This procedure requires Node.js (and NPM).

Procedure

  1. Use Vite and React SWC to create a new React project named tinymce-react-demo.

    # NPM 7+, extra double-dash is needed
npm create vite@5 tinymce-react-demo -- --template react-swc

  2. Go to the project directory and install @tinymce/tinymce-react

    cd tinymce-react-demo && npm install @tinymce/tinymce-react

  3. Unzip the content of the tinymce/js folder from the TinyMCE zip into the public folder. This will make tinymce avaiable to the application as static assets.

  4. Add 'public/tinymce' to the ignores array to ./eslint.config.js file.

    Diff of .eslint.config.js
    export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'public/tinymce'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],

  5. Update App.jsx with the below code snippet. Note: tinymceSrcScript references to the public tinymce using absolute root path.

    import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import './App.css';

export default function App() {
  const editorRef = useRef(null);
  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
  };
  return (
    <>
      <Editor
        tinymceScriptSrc='/tinymce/tinymce.min.js'
        licenseKey='gpl'
        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',
              '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: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
          }}
      />
      <button onClick={log}>Log editor content</button>
    </>
  );
}

  6. Run the development server to test the application:

    npm run dev

Other resources