Hosting the TinyMCE package with the React framework

The Official TinyMCE React component integrates TinyMCE into React projects. This procedure creates a React SWC plugin containing a TinyMCE editor.

For examples of the TinyMCE integration, visit the tinymce-react storybook.

Prerequisites

This procedure requires Node.js (and npm).

Procedure

  1. Use the Vite package and the React SWC plugin 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. Change to the newly created directory.

    cd tinymce-react-demo

  3. Install the tinymce, @tinymce/tinymce-react and fs-extra packages.

    npm install tinymce @tinymce/tinymce-react fs-extra

  4. Setup a postinstall script to copy TinyMCE to the public directory for hosting

    postinstall.js
    import fse from 'fs-extra';
import path from 'path';
const topDir = import.meta.dirname;
fse.emptyDirSync(path.join(topDir, 'public', 'tinymce'));
fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true });
    package.json
    {
  // ... other content omitted for brevity ...
  "scripts": {
    // ... other scripts omitted for brevity ...
    "postinstall": "node ./postinstall.js"
  }
}
    .gitignore
    # ... other rules omitted for brevity ...
/public/tinymce/

  5. Run the postinstall to copy TinyMCE to the public directory

    npm run postinstall

  6. Using a text editor, open ./src/App.jsx and replace the contents with:

    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>
    </>
  );
}

  7. Update the licenseKey option in the editor element and include your License Key.

  8. Test the application using the Node.js development server.

    • To start the development server, navigate to the tinymce-react-demo directory and run:

      npm run dev

    • To stop the development server, select on the command line or command prompt and press Ctrl+C.

Deploying the application to a HTTP server

The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: Building for Production or Deploying a Static Site.

To deploy the application to a local HTTP Server:

  1. Navigate to the tinymce-react-demo directory and run:

    npm run build

  2. You can optionally preview the production build by running:

    npm run preview

  3. Copy the contents of the tinymce-react-demo/dist directory to the root directory of the web server.

The application has now been deployed on the web server.

Additional configuration is required to deploy the application outside the web server root directory, such as http://localhost:<port>/my_react_application.

Next Steps