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!

We also talk about a WYSIWYG editor (what you see is what you get - which translates to "what you see is what you get" in good French 😋).

This means that the elements you see in the editor, such as a bold paragraph, a larger title, or an image, are the exact representation of how they will actually appear: no markdown, nothing. Just the content of your page as it will be displayed.

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

You can also use TinyMCE with JavaScript: the process is simple, and if you need help, feel free to mention it in the comments.

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.

It is mandatory to specify the apiKey property. We will generate it right after! 😉

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.

To ensure your editor works on your local site, also add localhost. Otherwise, TinyMCE will only load on your domain.

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.

Note that each added plugin provides the ability to use buttons. Some are offered by default, like undo and redo, but others come with the addition of a very specific plugin, such as:

• lists - allows using the bullist and numlist buttons
• link - allows using the link button
• image - allows using the image button

Some plugins thus offer multiple buttons while others offer only one: this allows us to customize the order of the buttons in our menu.

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}
/>

We have removed the image plugin as well as the button associated with it (image).

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!