How to integrate EditorJs in ReactJs

#react #editorjs #tutorial #wysiwyg

If you ever worked with front-end development, you will surely know how difficult it is to integrate a rich text editor into your application. There are a lot of rich text libraries out there which are compatible with different javascript frameworks.

A few days ago, I was searching for a rich text editor. This was not the first time I was going to integrate a rich text editor in a React application. In the past times, I have used the react-quill, DraftJs, WYSIWYG, etc. But this time the requirements were quite different and somebody suggested me this editor — Editorjs.

Editorjs is a pretty popular editor backed up by a good dev team with time-to-time updates. This editor is pretty different from other rich text editors out there.

Block Style Editor- every piece of content in the editor is a block. A block can be anything — a paragraph, header, image, or literally anything.
Clean JSON data output- It gives the final data output in JSON format
Supports Plugins- It supports plugins to add any feature in this editor ie. paragraphs, images, quote,s, etc. We can also create and integrate our custom plugins.
Clear Documentation- The documentation is clear and helpful.

So, let’s discuss how we can integrate it into our React project.

First, we need to install this library with npm — @editorjs/editorjs.

Then we will create a component as EditorComponent.js in our code repository.

In this component, we will return a “div” with “id=editorjs”.



const EditorComponent = () => {
    return  <><div id='editorjs'></div></>;
}

We will use this “id” attribute to integrate the editors in this div.

In the next step, we will create a method to initialize the EditorJs class imported from the Editorjs library.

First, we will import the EditorJs class



import EditorJS from "@editorjs/editorjs";

Then, we will initiate this class in a method and call this method in “useEffect” hook while initial load of the page.



const initEditor = () => {
       const editor = new EditorJS({
          holder: 'editorjs',
          onReady: () => {
            ejInstance.current = editor;
          },
          autofocus: true,
          data: DEFAULT_INITIAL_DATA,
          onChange: async () => {
            let content = await editor.saver.save();

            console.log(content);
          }
        });
      };

In the above code snippet, the “holder” key value should be the same as the id of the div defined in the first step.

We are using the “ejInstance” reference to the editor to check if the editor is loaded already or not.



const ejInstance = useRef();

The “autofocus” will focus the editor on the first load. In the data key, we can pass the initial data.



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

In the onChange method, we will get the editor data in “content”.

To make sure the editor load only once we have to add this condition in “useEffect”.



 useEffect(() => {
    if (ejInstance.current === null) {
      initEditor();
    }

    return () => {
      ejInstance?.current?.destroy();
      ejInstance.current = null;
    };
  }, []);

And we will destroy the instance while the component unmounts.

Adding a plugin

By default, Editorjs provides only simple text or paragraphs, but if we want to add more functionality like, headings, upload images, embeds, etc. Then, we need to use different plugins provided by EditorJs team.

In this application, we will use the “Header” plugin to enable headings. For this, we have to install a package- @editorjs/header.

To enable this in the editor we need to add a key “tools” in the editor instance like this.



const editor = new EditorJS({
          holder: 'editorjs',
          onReady: () => {
            ejInstance.current = editor;
          },
          autofocus: true,
          data: DEFAULT_INITIAL_DATA,
          onChange: async () => {
            let content = await editor.saver.save();

            console.log(content);
          },
          tools: { 
            header: Header, 
          },
        });
      };

If you need other plugins, you can check them on this link.

If you want to build a custom plugin, you can check this link.

GitHub Link- https://github.com/sumankalia/react-editorjs

Check youtube video in Hindi-

Thanks for reading 😀

Top comments (2)

Henry Deutsch • Jun 28

"Then, we will initiate this class in a method and call this method in “useEffect” hook while initial load of the page."
-- what in the world is that sentence