Demo of Editor.js

Editor.js is a modern, feature-rich block styled editor. The most highlighting feature of Editor.js is that it is a block-styled editor which means it creates separate blocks for different elements like paragraphs, images, lists, etc.

This also enables the Editor.js to render clean, JSON data. Other text editors such as Draft.js produce HTML-markup data which is harder to store compared to the JSON data output of Editor.js. This is what the data output looks like:

{
   "time": 1550476186479,
   "blocks": [
      {
         "type": "header",
         "data": {
            "text": "Editor.js",
            "level": 2
         }
      },
      {
         "type": "paragraph",
         "data": {
            "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration."
         }
      },
      {
         "type": "header",
         "data": {
            "text": "Key features",
            "level": 3
         }
      },
}

Moreover, you can create your own renderer for the data output of Editor.js since the data is in JSON.

It works with vanilla JavaScript as well as a variety of frameworks. You can create a wrapper component for your framework of choice and start using Editor.js or you can use other’s wrapper components. Some of the most popular Editor.js wrapper components are listed below:

1. Ngx-EditorJS for Angular
2. vue-editor-js for Vue
3. react-editor-js for React

I will be setting up and configuring Editor.js with vanilla JavaScript in this tutorial.

#web-development #javascript #editor.js