Getting started

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

  1. Install Editor.js 
  2. Configure and initialise the Editor
  3. Install and connect Tools

Installation

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

  1. Node package
  2. Source from CDN
  3. Local file from project

Node.js package

Install the package via NPM or Yarn

npm i @editorjs/editorjs --save-dev
yarn add --dev @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.

<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>

Manually load file to your project

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

<script src="editor.js"></script>

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 — holderId in default value — «codex-editor» 

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

that equals

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

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 own logic. 

There is an 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 a Blocks you need and follow the installation guide in their README.md files.

  1. Header
  2. Link embeds
  3. Raw HTML blocks
  4. Simple Image (without backend requirement)
  5. Image
  6. Checklist
  7. List
  8. Embeds
  9. Quote

And some others.

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

Tools connection

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

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

Lets add some more Tools to our page with 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 */ holderId: 'codex-editor', /** * 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 */ holderId: 'codex-editor', /** * 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 example above, we configure available Inline Toolbar settings: Header tool will have only Link at the Inline Formatting Toolbar (aka Inline Toolbar), and List Tools will have all available Inline Tools at the Inline Toolbar