Using TinyMCE from Tiny Cloud in React

This guide shows how to integrate TinyMCE from Tiny Cloud 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. Update App.jsx to include Editor from tinymce/tinymce-react as below.

    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
        apiKey='no-api-key'
        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>
    </>
  );
}

  4. Update the apiKey prop with your Tiny Cloud API key.

  5. Run the development server to test the application:

    npm run dev

Other resources