How to install TinyMCE in a project using React or NextJS?

TinyMCE is one of the most popular rich text editors, if not the most used. It offers a complete editing experience with a whole bunch of customizable options to perfectly adapt to the needs of each project.

In other words, it greatly enhances the user experience by allowing users to fill in their information as if they were using an editor like Google Docs!

Let's now see how to install and configure TinyMCE in a project using React or NextJS (Next.js for friends)! 😉

Prerequisites for Installation

Before starting to use TinyMCE, make sure:

• you have a project built with React or NextJS
• you have NodeJS and npm installed

Initializing a React or NextJS Project

If you don't have a React or NextJS project yet, here's how to create one quickly.

For a React Project

Simply initialize your project using Vite:

npm create vite@latest

Select React and you're good to go. 😬

For a NextJS Project

If you're working with NextJS, use this command:

npx create-next-app@latest

Let yourself be guided and voilà: a brand new project.

Installing TinyMCE

To install TinyMCE in our project, we need to use the official package @tinymce/tinymce-react.

npm install @tinymce/tinymce-react

This command allows us to download TinyMCE along with all its necessary dependencies for its proper functioning.

Integrating TinyMCE into a Component

To use TinyMCE, the best approach is to use a dedicated component.

We will later see how to customize TinyMCE with hundreds of options: you'll be happy when you only need to apply changes to your dedicated TinyMCE component rather than to your hundreds of pages using the editor! 😉

Creating a Component Exclusively for TinyMCE

Let's create a file named TinyEditor.js:

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

const TinyEditor = () => {
  const [content, setContent] = useState('');

  const handleEditorChange = (content) => {
    setContent(content);
    console.log('Edited content:', content);
  };

  return (
    <div>
      <Editor
        apiKey='your-api-key'
        initialValue="<p>Write here...</p>"
        init={{
          height: 500,
          menubar: false,
          plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
          ],
          toolbar:
            'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
        }}
        onEditorChange={handleEditorChange}
      />
      <p>Edited content: {content}</p>
    </div>
  );
};

export default TinyEditor;

To start, we import the Editor component from the TinyMCE package, which allows us to display a rich text editor.

In this example, we use the initialValue property, which allows us to set an initial value when the user first sees the text editor. This property is optional.

The init property allows us to initialize TinyMCE with the following properties:

• height - specifies the height of the editor;
• menubar - allows you to show or hide the menu bar (like in a real text editor);
• plugins - this is where you add the plugins you want to use;
• toolbar - this is where you place the plugins you've added. This allows you to organize the buttons in the way you want.

Finally, onEditorChange allows you to specify what the editor should do when a change is made. Here, we store the modified content in the state content and display its content in the console.

Generating an API Key to Use TinyMCE

To use TinyMCE, an API key is mandatory.

To generate it, simply create an account on TinyMCE: click this link.

Then click on "Get your API Key".

Retrieve your API key and modify your apiKey property in your TinyEditor component.

Finally, don't forget to add your domain in "Approved Domains" so that your editor can function on your site.

Using the Component with React

Using our TinyEditor component with React is straightforward: simply call it!

import TinyEditor from '../components/Editor';

export default function Home() {
  return (
    <div>
      <h1>My TinyMCE Editor</h1>
      <TinyEditor />
    </div>
  );
}

All that's left is to add properties that will allow you to retrieve the data from your editor.

The Specific Case of NextJS

With NextJS, you might encounter an error related to server-side rendering (SSR).

Indeed, TinyMCE uses many objects that are only available in the browser, like the window object.

Fortunately, there's a simple solution to disable SSR specifically for TinyMCE! 😗

To avoid the error "window is not defined", use NextJS's dynamic function to load TinyMCE only on the client side:

import dynamic from 'next/dynamic';

const TinyEditor = dynamic(() => import('../components/TinyEditor'), {
  ssr: false
});

export default function Home() {
  return (
    <div>
      <h1>My TinyMCE Editor</h1>
      <TinyEditor />
    </div>
  );
}

Our editor is now rendered exclusively on the client side, resolving the issues related to SSR.

Customizing TinyMCE

One of the major strengths of TinyMCE is its modularity in terms of customization. It is indeed possible to enable but also disable all the plugins you want (or almost) to meet the needs of your projects and your users.

Available Plugins with TinyMCE

TinyMCE offers numerous plugins, but not all of them are free. 😕

Fortunately, the best ones are available for free! Here's a short list of the top plugins to use in your editor:

• autolink - to automatically create links (without using the "add link" button)
• image - to add images
• code - to add a code block to display a code snippet, for example
• link - to add links
• lists - to create lists
• table - to add tables

The complete list of plugins available with TinyMCE is available at this link if you want to explore more possibilities.

Adding or Removing Plugins

Adding Plugins

To add plugins in TinyMCE, you need to specify them in the plugins property that we saw during initialization in our TinyEditor component.

Here's a small example with some of our selected plugins:

<Editor
  apiKey='your-api-key'
  init={{
    height: 500,
    plugins: 'autolink lists link image',
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image',
    menubar: false
  }}
  onEditorChange={handleEditorChange}
/>

In this example:

• autolink: automatically converts URLs into links;
• lists: allows creating and customizing bulleted or numbered lists;
• link: allows adding and editing links by modifying the link anchor (the link text);
• image: allows adding images.

Some buttons are available by default: this is the case with the undo and redo buttons, which allow navigating through changes made to our content.

Removing Plugins

If certain plugins are not necessary, simply do not add them.

For example, the same editor as our previous example but without the plugin that manages images would look like this:

<Editor
  apiKey='your-api-key'
  init={{
    height: 500,
    plugins: 'autolink lists link',
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link',
    menubar: false
  }}
  onEditorChange={handleEditorChange}
/>

Conclusion

TinyMCE is truly an excellent WYSIWYG editor. Very easy to integrate, easily modular to adapt it to our projects, it's no coincidence that it is today the most used editor! 😋

If you want to learn more about React or NextJS, start right now with our up-to-date React training or our NextJS training!