How to add WYSIWYG editor in React JS using Editor JS

Today in this tutorial we will learn how to integrate the WYSIWYG editor in our React application using Editor JS.

Editor.js is a modern and highly customizable WYSIWYG (What You See Is What You Get) editor designed to simplify content creation for web applications. It provides a user-friendly interface that allows users to create rich and structured content without needing to know any HTML or other markup languages. Developed by the team at Codex, Editor.js offers a wide range of features and flexibility, making it a popular choice among developers and content creators.

One of the key strengths of Editor.js is its block-based approach. Instead of dealing with a single continuous text field, content is divided into blocks, each representing a different type of content element, such as headings, paragraphs, lists, images, quotes, and more. These blocks can be rearranged, edited, and customized independently, giving users granular control over the content’s structure.

So let us see how we integrate that into our react project.

Step 1: Set up your React project

If you haven’t already set up your React project, you need to create one by pasting the below command in your terminal.

npx create-react-app dropdown-menu

Step 2: Install Editor.js and its required plugins

Open the terminal and run the below command to install the editor.js and its necessary plugins in your project root directory.

npm install @editorjs/editorjs @editorjs/checklist @editorjs/header @editorjs/link @editorjs/list @editorjs/paragraph @editorjs/delimiter

Step 3: Create Editor.js Tools Configuration File

Create a file with the name tools.js in your project directory and paste the below code.

import Paragraph from "@editorjs/paragraph";
import Header from "@editorjs/header";
import List from "@editorjs/list";
import Link from "@editorjs/link";
import Delimiter from "@editorjs/delimiter";
import CheckList from "@editorjs/checklist";

export const EDITOR_JS_TOOLS = {
  paragraph: {
    class: Paragraph,
    inlineToolbar: true,
  },
  checkList: CheckList,
  list: List,
  header: Header,
  delimiter: Delimiter,
  link: Link,
};

This file contains our Editor.js tools which are required to create the editor. The tools can be modified according to your requirements. For a list of additional tools and their configurations, check out the Editor.js documentation.

Step 4: Create an Editor Component

Now we will create a component for our editor where we initialize our Editor.js and call our configured tools. Create a file with the name Editor.js inside the project directory and paste the below code.

import React, { memo, useEffect, useRef } from "react";
import EditorJS from "@editorjs/editorjs";
import { EDITOR_JS_TOOLS } from "./tools";

const Editor = ({ data, onChange, editorblock }) => {
  const ref = useRef();
  //Initialize editorjs
  useEffect(() => {
    //Initialize editorjs if we don't have a reference
    if (!ref.current) {
      const editor = new EditorJS({
        holder: editorblock,

        tools: EDITOR_JS_TOOLS,
        data: data,
        async onChange(api, event) {
          const data = await api.saver.save();
          onChange(data);
        },
      });
      ref.current = editor;
    }

    //Add a return function to handle cleanup
    return () => {
      if (ref.current && ref.current.destroy) {
        ref.current.destroy();
      }
    };
  }, []);
  return <div id={editorblock} />;
};

export default memo(Editor);

Step 5: Use the Editor Component

Now, you can use the Editor component in your main App.js file or any other component where you want to include the WYSIWYG editor.

import React, { useState } from "react";
import "./App.css";
import Editor from "./Editor";

// Initial Data
const INITIAL_DATA = {
  time: new Date().getTime(),
  blocks: [
    {
      type: "header",
      data: {
        text: "This is my awesome editor!",
        level: 1,
      },
    },
  ],
};

function App() {
  const [data, setData] = useState(INITIAL_DATA);
  return (
    <div className="editor">
      <Editor data={data} onChange={setData} editorblock="editorjs-container" />
      <button
        className="savebtn"
        onClick={() => {
          alert(JSON.stringify(data));
        }}
      >
        Save
      </button>
    </div>
  );
}

export default App;

Here we have also added INITIAL_DATA to display when the editor is loaded. I have also added a save button which on click will show us the editor data in JSON format, We can thus use that JSON data to display our editor data wherever we want to display it.

Step 6: Styling

CSS can be used to style the editor. You may use the Editor.js component specific class names to style the editor to match the theme of your application.

.editor {
  box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
  background: #fff;
  padding: 20px 30px;
  width: 60%;
  margin: 50px auto;
}

body {
  background: #f5f8fa;
}

#editorjs-container {
  background-color: #f9f9f9;
  padding: 20px 30px;
  margin-bottom: 20px;
}

.ce-toolbar__content, .ce-block__content {
  max-width: unset;
  width: 92% !important;
}

.editorjs-codeFlask_Wrapper .editorjs-codeFlask_LangDisplay {
  max-width: unset;
  height: unset !important;
}

.editor button {
  border: none;
  padding: 10px 20px;
  background: #2cd3ff;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

That’s it for today below you can find the sample GitHub Repository and Codesandbox demo.

For any query, you can get in touch with me via LinkedIn

GitHub - Mediumtutorial/wysiwyg-editor-js-react: How to add WYSIWYG editor in React JS using Editor…