14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

How to add a rich text editor into React JS

October 11th, 2023

4 min read

Elements of JavaScript reference React while images on a computer screen represent the text editor

Written by

Joe Robinson

Category

How-to Use TinyMCE

New apps struggle in a crowded marketplace, to say the least. To stand out, you need to deliver something game changing. For many product managers, being innovative is a hard enough goal – but focusing on a better interface can often help your efforts to make your app stand out.

For a better interface, you’ll want to provide users with a more advanced WYSIWYG content creation experience. This can be achieved by adding a rich text editor to your React project, and it’s really easy to do!

In this article, we’ll go one step further and demonstrate how to add a text editor in React – specifically, adding a rich text editor into React (in a form project) as a demonstration of adding TinyMCE  to assist in changing the game with your app.

What text editor to use in React?

TinyMCE's integration with React allows for an easy integration process with projects running the React library. The integration takes only a few moments:

  1. Install the dedicated package
  2. Add the lines of JavaScript that incorporates TinyMCE into the interface.

For production, many of the frameworks that connect with React (React-powered frameworks, or React JS) can export to static HTML, CSS, and JSS content when you're ready to move to production – after integrating the TinyMCE rich text editor for your React project.

The following demo shows the TinyMCE integration:

How to add a text editor into React

The following demo makes use of the React library combined with the Next.js framework, which is a full-stack React-powered framework:

  1. In your development environment, create a demo app with the create-next-app command:

npx create-next-app@latest
  1. Install the TinyMCE component:

npm install @tinymce/tinymce-react
  1. Navigate to the src/App.js file within the project, and open the App.js file

  2. Replace the contents with the following:

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
        apiKey="your-api-key"
        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",
            "preview",
            "anchor",
            "searchreplace",
            "visualblocks",
            "code",
            "fullscreen",
            "insertdatetime",
            "media",
            "table",
            "code",
            "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>
    </>
  );
}
  1. Save the change

  2. Run npm run start to test the demo:

The TinyMCE React integration working in a browser

How TinyMCE and React handles editor change

A significant part of adding the TinyMCE rich text editor into React is handling change and controlled components.

TinyMCE and React make use of a state variable content (initially '') to set and keep track of the textarea value, and changes to the textarea value. The textarea value is set initially with value={this.state.content}. Then, every time textarea changes, the handleChange() function uses the setState() 'request' to update content with the new value.

This means the value is always updated to reflect the current value of textarea. When you’re ready to do something with the content entered, you can access the current value directly from the component’s state. This is demonstrated in the handleSubmit() function which is called when the form is submitted in the demo.

How to use a rich text editor in React

In production, when you're ready, it's important to make sure you've registered your app's domain name with TinyMCE. Here's how to configure your domain name:

  1. Start by getting a free API key (you’ll also get a 14-day free trial of all TinyMCE Premium plugins).

  2. Add your domain to the list of Approved Domains in your Tiny account (localhost is included by default).

  3. Add your API key to the editor config in src/App.js as shown below (replacing my-api-key with the API key displayed on your Tiny Dashboard):

<Editor
  apiKey="my-api-key"
  value={this.state.content}
  init={{
    height: 500,
    menubar: false,
  }}
  onEditorChange={this.handleChange}
/>;

NOTE: The warning message might not disappear instantly – there may be a delay while your domain propagates through our system.

More about integrating TinyMCE into React

Refer to our comprehensive documentation for more information on integrating TinyMCE with React, including properties accepted by the editor component as well as event binding.

TinyMCE is configured with naked skin, thin icons, and toolbar options grouped on the bottom. Now that you’ve got the default rich text editor running in your React form, you’ll want to think more about how it’s configured, for example, which options make sense for your users and specific application:

  • Do you need only a few options like bold, italics, and underline?
  • Do you want the full range of text editing options?
  • Do you want the toolbar to be at the top or the bottom of the frame?

And do you want to customize the skin to better fit with your design system?

Check out our related blog posts on these topics:

Contact the TinyMCE Sales team for more information on how TinyMCE can integrate with your React app with TinyMCE, and how to use TinyMCE as the rich text editor in React.

ReactIntegrationJavascript
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCEFeb 20th, 2024

    How to configure TinyMCE trigger save

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.