@tinymce/tinymce-react

Official React Component for TinyMCE

About

Official React component for TinyMCE, the rich text editor. It wraps TinyMCE as a React <Editor /> component, supporting controlled and uncontrolled usage. By default, it pulls TinyMCE from the Tiny Cloud CDN unless configured to use a different setup, such as self-hosting the tinymce NPM package.

Quickstart

Cloud CDN

1. Sign up for a Tiny Cloud account to receive a Tiny Cloud API key.
2. Then in your React project:

   1. Run npm install @tinymce/tinymce-react

   2. Include the following code:

      import React from 'react';
      import { Editor } from '@tinymce/tinymce-react';
      
      export default function App() {
        return (
          <>
            <h1>TinyMCE React demo</h1>
            <Editor
              apiKey="your-api-key"
              init={{
                plugins: 'lists link image table code help wordcount'
              }}
            />
          </>
        );
      }

   3. Update the apiKey prop on the Editor component to include your Tiny Cloud API key.

For more information: Using TinyMCE with React - Cloud CDN

Self hosted via NPM package

Using TinyMCE from NPM in a React project requires a couple of extra steps. See the documentation for more information: Using TinyMCE with React - Self hosted via NPM

Demos

For our quick demos, check out the TinyMCE React Storybook.

Detailed documentation

• TinyMCE React Technical Reference.
• TinyMCE Documentation.

Issues

Have you found an issue with tinymce-react or do you have a feature request? Open up an issue and let us know or submit a pull request.

Note: for issues concerning TinyMCE please visit the TinyMCE repository.

License

tinymce-react is licensed under the MIT License. See the LICENSE.txt file for details.

Depending on use case, the TinyMCE core editor can be used under either GPL-2.0-or-later or a commercial license. See the tinymce package for details.