Easy Guide to Integrate TinyMCE with React | Step-by-Step Tutorial

Integrating TinyMCE with React is a breeze using our @tinymce/tinymce-react package. Here's a straightforward guide to setting up a project using React, TinyMCE, and the Create React App:

1. Install the Create React App:

First things first, let's get the Create React App installed. It's a handy tool for quickly setting up React projects.

Just run this command:

 npm install -g create-react-app

2. Create a New Project:

Now, let's create a new project using the Create React App. We'll name it tinymce-react-demo.

Run:

create-react-app tinymce-react-demo

Once it's done, navigate into the project directory:

 cd tinymce-react-demo 

3. Set up react-tinymce:

Install the npm package and save it to your package.json with --save.

Run:

npm install --save @tinymce/tinymce-react

.Loading TinyMCE:

• Auto-loading from TinyMCE Cloud: If TinyMCE isn't available globally, @tinymce/tinymce-react automatically loads TinyMCE Cloud. To avoid warnings, sign up for the cloud and use your API key like this:

<Editor apiKey='YOUR_API_KEY' init={{ /* your other settings */ }} />

• Loading TinyMCE by yourself: If you prefer not to use TinyMCE Cloud, you'll need to make TinyMCE globally available yourself. This can be done by hosting tinymce.min.js or installing TinyMCE via npm.

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/4/tinymce.min.js"></script>

4. Replace the App.js file:

Open the provided App.js file in the src directory and replace its content with the following code:

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

class App extends React.Component {
  handleEditorChange = (e) => {
    console.log('Content was updated:', e.target.getContent());
  }

  render() {
    return (
      <Editor
        initialValue="<p>This is the initial content of the editor</p>"
        init={{
          plugins: 'link image code',
          toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
        }}
        onChange={this.handleEditorChange}
      />
    );
  }
}

5. Start the Development Server:

Fire up the development server provided with the Create React App.

Run:

 npm start

6. Keep on leaning:

This guide gives you a simple start. For more complex configurations, refer to the React documentation and explore further.

That's it! You're all set to integrate TinyMCE with your React project. Happy coding!