The 5 best React Rich Text Editor

In React, we have different options to implement React Rich Text Editors or React wysiwyg. The Rich text editor is widely used to create form posts, comments, messaging applications, blogs, and more. The Rich Text Editor allows us to add or edit content, link, video, image, Youtube, tables, columns,s and more.

In this tutorial, we have a few objectives, but the four main objectives are as follows.

1. List 5 most used React Rich Text Editor
2. Demonstrate an example from React Quill to demonstrate React WYSIWYG example
3. Demonstrate an example of React WYSIWYG from React Draft Wysiwyg
4. Demonstrate Rich Text Editor example using the TinyMCE-react library.

5 Best React Rich Text Editor libraries

There are plenty of third parties libraries to implement React WYSIWYG editor in React project. I had listed here some of them based on their popularity and usage, If you know some good Rich Text editors for React please let me know in the comments section.

The content in the Rich Text editor can be formatted easily and displayed content on the browser. Allows the user to use a wide variety of tools to edit and format rich content and returns valid HTML markup content. Here are some popular Rich Text editor libraries in React.

Setup and configure React Rich Text Editor project

Let’s first create our Rich Text Editor project and we have three examples of Rich Text Editor using different libraries. Before starting an angular project you need to install Nodejs and Angular CLI in your system.

ng new richText-app
cd richText-app

Free React Rich Text Editor Example using the react-quill library

We’ll demonstrate Rich Text Editor using the third-party library the react-quill. The react-quill has three pre-built themes, as follows.

• Quill Snow: Quill’s standard theme appearance.
• Quill Bubble: Similar to the inline editor on Medium.
• Core theme: The core theme must be included for modules like toolbars or tooltips to work.

 To add react-quill successfully on React, we have to follow these steps.

1. Create a React project, and install react-quill and all its dependency libraries.
2. Import selected quilljs CSS in the component where we want to use the react-quill library
3. Used the <ReactQuill> component and added all the configurations for the component.

Here is a screenshot of our Angular Rich Text Editor example and we can React Rich text editor with image upload.

Let’s create a project, and install the react-quill

npx create-react-app rich-text-editor-app
cd rich-text-editor-app
npm i react-quill

Let’s import the ReactQuill component from the react-quill and quill snow CSS theme. We can configure what tools to display on the react-quill editor.

import React, { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import './App.css'

function App() {
  const [value, setValue] = useState("");
  const modules = {
    toolbar: [
      [{ header: [1, 2, 3, false] }],
      [{ font: [] }],
      [
        "bold",
        "italic",
        "underline",
        "strike",
        "blockquote",
        "link",
        "header",
        "font",
        "size",
        "list",
        "bullet",
        "indent",
        "link",
        "image",
        "color",
        { align: [] },
      ],
    ],
  };
  return (
    <div className="quillContainer">
      <ReactQuill
        theme="snow"
        placeholder="Enter your rich text edtior"
        modules={modules}
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

export default App;

I also add React rich Text editor typescript example using react-quill in stackblitz.com, if you take reference then check here.

React Rich Text Editor example using TinyMCE-react

Let’s demonstrate the second React WYSIWYG using the TinyMCE-react library. TinyMCE is a rich-text editor that allows users to create formatted content within a user-friendly interface. We can easily Integration with TinyMCE in React using the @tinymce/tinymce-react package.

Here is the screenshot of our React WYSIWG examples.

Let’s create React project and install react TinyMCE library.

npx create-react-app rich-text-editor-app
cd rich-text-editor-app
npm i @tinymce/tinymce-react save

Let’s import the Editor component from the React Tinymce and you need to add the TinyMCE API key. I had kept the API key blank and please replace it with your API key from TinyMCE.

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

function App() {
  const handleEditorChange = (content, editor) => {
    console.log("Content was updated:", content);
  };

  return (
    <Editor
      apiKey={" YOUR KEY "}
      initialValue="<p>This is the initial content of the editor</p>"
      init={{
        height: 400,
        width: 800,
        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}
    />
  );
}

export default App;

React WYSIWYG using React Draft Wysiwyg

In our last example, we’ll demonstrate Rich Text Editor using React Draft WYSIWYG library. A Wysiwyg editor built using ReactJS and DraftJS libraries. This library has other library dependencies, let’s configure and set up the project first.

npx create-react-app react-draft-app
cd react-draft-app
npm install react-draft-wysiwyg
npm install draft-js draftjs-to-html

Here is our screenshot of React Draft WYSIWYG example.

We have the option to select different colors, different fonts, different color picker options, and image upload via link.

Let’s create separate components for React Draft WYSIWYG called EditorContainer.jsx and add the following code.

import React, { Component } from "react";
import { EditorState, convertToRaw, ContentState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import draftToHtml from "draftjs-to-html";
import htmlToDraft from "html-to-draftjs";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import './EditorContainer.css';

const toolbar = {
  inline: {
    options: ["bold", "italic", "underline"],
  },
  fontSize: {
    options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
  },
  textAlign: {
    inDropdown: false,
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
    options: ["left", "center", "right"],
  },
  link: {
    inDropdown: false,
    className: undefined,
    component: undefined,
    popupClassName: undefined,
    dropdownClassName: undefined,
    showOpenOptionOnHover: true,
    defaultTargetOption: "_self",
    options: ["link"],
    linkCallback: undefined,
  },
  colorPicker: {
    className: undefined,
    component: undefined,
    popupClassName: undefined,
  },
  emoji: {
    inDropdown: true,
    className: undefined,
    component: undefined,
    popupClassName: undefined,
  },
};

export default class EditorContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: null,
    };
  }

  componentWillMount() {
    const html = "<p>Hey this <strong>editor</strong> rocks 😀</p>";
    const contentBlock = htmlToDraft(html);
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(
        contentBlock.contentBlocks
      );
      const editorState = EditorState.createWithContent(contentState);
      this.setState({
        editorState,
      });
    }
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;
    return (
      <div className="mainContainer">
        <Editor
          editorState={editorState}
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          onEditorStateChange={this.onEditorStateChange}
          toolbar={toolbar}
        />
        <textarea
          disabled
          value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        />
      </div>
    );
  }
}

We added some styles for the EditorContainer class component in the EditorContainer.css file

.mainContainer {
  width: 80%;
}

.wrapperClassName {
  padding: 1rem;
  border: 1px solid #ccc;
}
  
.editorClassName {
  background-color:lightgray;
  padding: 1rem;
  border: 1px solid #ccc;
}
.toolbar-class {
  border: 1px solid #ccc;
}

Our EditorContainer is a class component and you can change it to a function component. At last, we need to import this component inside the App.js file as below.

import EditorContainer from "./EditorContainer";

function App() {
  return (
    <div>
      <h2>Test with React Draft Wysiwyg.</h2>
      <EditorContainer />
    </div>
  );
}

export default App;

In React 18, font size, font family, and all picker related are not working in React Draft WYSIWYG, we need to replace render in the index.js file. With changing render source all pickup options are not working. I guess React Draft needs to fix this issue in the latest React.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

Conclusion

We had completed Rich Text Editor in React, we demonstrated three different examples from different libraries. You have full options to select what library is best for your project. I hope you had learned something, if so then please share it with others and on social networks, this will encourage me to add more content. Follow me on my GitHub collection, I had code on Angular, react, and Ionic frameworks.

Related React Tutorial

1. Guide to Using and Creating React material UI grid.
2. React material UI App Bar in detail with y
3. How to implement React table and its component?
4. When and how to use React Context API?
5. React Axios for HTTP method with REST API
6. React router navigates outside component.
7. How to implement React routing using react-router-dom?