Getting started

To get started using Editor.js, follow these steps:

Install Editor.js
Configure and initialise the Editor
Install and connect Tools

Installation

Choose the most usable method of getting Editor.js for you.

Node package
Source from CDN
Local file from project

Node.js package

Install the package via NPM or Yarn

npm i @editorjs/editorjs --save

yarn add @editorjs/editorjs

Include module in your application

import EditorJS from '@editorjs/editorjs';

Load from CDN

You can load specific version of package from jsDelivr CDN.

Manually load file to your project

Copy editor.js file to your project and load it.

Configuration

You can init Editor.js with zero-configuration option

import EditorJS from '@editorjs/editorjs'; const editor = new EditorJS();

It equals the simplest config with one required option — holder in default value — «editorjs»

import EditorJS from '@editorjs/editorjs'; const editor = new EditorJS('editorjs');

that equals

import EditorJS from '@editorjs/editorjs'; const editor = new EditorJS({ /** * Id of Element that should contain Editor instance */ holder: 'editorjs' });

See Configuration page for the further tunings.

Tools installation

As described in Base Concepts, each Block in Editor.js is provided by a Plugin. There are simple external scripts with their own logic.

There is the only Paragraph block already included in Editor.js. Probably you want to use several Block Tools that should be installed and connected.

You can find some available Blocks here. Select the Blocks you need and follow the installation guide in their README.md files.

Header
Link embeds
Raw HTML blocks
Simple Image (without backend requirement)
Image
Checklist
List
Embeds
Quote

And some others.

After Tools installation, you should connect them to the Editor via the configuration object.

Tools connection

At first, take a look on the simplest config we just created

import EditorJS from '@editorjs/editorjs'; const editor = new EditorJS({ /** * Id of Element that should contain the Editor */ holder: 'editorjs', })

Let's add some more Tools to our page with the tools property. Tools` scripts should be installed as explained above.

import EditorJS from '@editorjs/editorjs'; import Header from '@editorjs/header'; import List from '@editorjs/list'; const editor = new EditorJS({ /** * Id of Element that should contain the Editor */ holder: 'editorjs', /** * Available Tools list. * Pass Tool's class or Settings object for each Tool you want to use */ tools: { header: Header, list: List }, })

in this case, we connect Tools` Plugins without any options.

☝️

Note.

The keys of tools objects will be added as type fields to the Saved Data.

You can specify some settings of connected Tools:

import EditorJS from '@editorjs/editorjs'; import Header from '@editorjs/header'; import List from '@editorjs/list'; const editor = new EditorJS({ /** * Id of Element that should contain the Editor */ holder: 'editorjs', /** * Available Tools list. * Pass Tool's class or Settings object for each Tool you want to use */ tools: { header: { class: Header, inlineToolbar: ['link'] }, list: { class: List, inlineToolbar: true } }, })

In the example above, we configure available Inline Toolbar settings: Header tool will have the only Link at the Inline Formatting Toolbar (aka Inline Toolbar), and List Tools will have all available Inline Tools at the Inline Toolbar

☝️

Note.

If you use TypeScript you need to explicitly specify that typeof Tool implements BlockToolConstructable or InlineToolConstructable

Available tools options

`class`	Tool class
`config`	Tool specific configuration passed to Tool constructor
`inlineToolbar`	controls which Inline Tool should be available in your Block Tool. Accepts boolean value or array of Inline Tools names
`shortcut`	shortcut for Tool. You can read more about the format here
`toolbox`	option to rewrite Tool`s internal toolbox icon and title. The format is the same as here