editor.js — -a Block-Styled editor with multiple ready-to-use Plugins

Photo by Kal Visuals on Unsplash

Editor.js is a Block-Styled editor. Blocks are structural units, of which the Entry is composed. For example, Paragraph, Heading, Image, Video, List are Blocks. Each Block is represented by plugins. We have many ready-to-use Plugins and a simple API for creating new ones.

My demo is the text editor which can display saved data on the screen.

Step1:

link latest editor.js in body, and each plugin you need to be attached. from CDN

Step2:

HTML

two sections display: left is editor, right is the display board.

Step3:

CSS rendering

Step4:

js

Grab the click save button.

Init the EditorJS with default objects.

There are ten types of plugins:

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

When clicking the save button, the text displayed on the output section.

For more editor.js documents check their Github

My demo FREE DOWNLOAD

👉Follow me for more useful web development content! love sharing🥰