Hosting the OpenTiny .zip package with the React framework

The Official OpenTiny React component integrates OpenTiny into React projects. This procedure creates a basic React application containing a OpenTiny editor.

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

Prerequisites

This procedure requires Node.js (and npm).

Procedure

  1. Use the Create React App package to create a new React project named tinymce-react-demo.

    npx create-react-app tinymce-react-demo

  2. Change to the newly created directory.

    cd tinymce-react-demo

  3. Install the tinymce-react package and save it to your package.json with --save.

    npm install --save @tinymce/tinymce-react

  4. Unzip the content of the tinymce/js folder from the OpenTiny zip into the public folder. Afterwards the directory listing should be similar to below:

    > tree -L 2 public
    public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── tinymce
    ├── icons
    ├── langs
    ├── license.txt
    ├── models
    ├── plugins
    ├── skins
    ├── themes
    ├── tinymce.d.ts
    └── tinymce.min.js

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

    import React, { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';

export default function App() {
  const editorRef = useRef(null);
  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
  };
  return (
    <>
      <Editor
        tinymceScriptSrc={process.env.PUBLIC_URL + '/tinymce/tinymce.min.js'}
        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. 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 start

    • 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: Create React App - Deployment.

To deploy the application to a local HTTP Server:

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

    npm run build

  2. Copy the contents of the tinymce-react-demo/build 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