How to add a rich text editor into React JS

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 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. Add a rich text editor to your React project today, and get back to being innovative!

In this article, follow the steps to add a text editor in React. TinyMCE provides a dedicated React integration with powerful, out-of-the-box capabilites. Adding a rich text editor into React with 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 to set up. You can:

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.

Check on the TinyMCE React Storybook to see the integration working right now.

How to add a text editor into React

The following steps show how to add TinyMCE to a React project, getting started quickly:

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

npx create-react-app react-editor-tinymce

Then install the TinyMCE component:

cd react-editor-tinymce

With the demo set, navigate to the src/App.js file within the project, and open the App.js file, and then replace the contents with the following:

import { Editor } from "@tinymce/tinymce-react";
import "./App.css";

function App() {
  const editorRef = useRef(null);
  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
  };
  return (
    <>
      <Editor
        apiKey="ADD-YOUR-API-KEY-HERE"
        onInit={(evt, editor) => (editorRef.current = editor)}
        initialValue="<p>This is the initial content of the editor.</p>"
        init={{
          height: 500,
          menubar: false,
          plugins: [
            "ai preview powerpaste casechange footnotes tinycomments searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed advtemplate codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker mergetags a11ychecker editimage help formatpainter permanentpen pageembed charmap quickbars linkchecker emoticons advtable export mentions typography markdown importword",
          ],
          toolbar:
            "undo redo | importword | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table media pageembed | lineheight  outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print export | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck",
          importword_service_url: "add.url.here",
          templates: [],
          content_style:
            "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
        }}
      />
      <button onClick={log}>Log editor content</button>
    </>
  );
}

export default App;

Save the changes to the App.js file.

Open the App.css file, which can be found in the src/ directory, and add the following CSS content to style the demo, and start building a better interface:

button {
    color: white;
    background-color: blue;
    border-radius: 5px;
}

button:active {
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}

Save the change, and then change out of the src/ directory to the top level of the demo, and then run the npm run start command to test the demo:

✏️NOTE: The demo contains a complete set of Advanced TinyMCE features to provide your React project's customers with a powerful capabilities. These features, however, require additional configuration to work beyond this demo's scope.

To access Advnaced features, you'll need a TinyMCE API key, which is FREE, and comes with a 14-day free trial of all TinyMCE Advanced features.

Contact us for more on how you can use Advanced features with TinyMCE and React.

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. Add your domain to the list of Approved Domains in your Tiny account (localhost is included by default).
2. Make sure you've added 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 the TinyMCE system.

More about integrating TinyMCE into React

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

Now that you’ve got the default rich text editor running in your React form, the next step is 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 the related blog posts on these topics:

• A toolbar for all occasions: Customizing the TinyMCE toolbar
• Give me some skin: TinyMCE skins and icons
• A guide on what is rich text editor and how RTE differs from a simple text editor
• A comparison of best rich text editors for React

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.