Heading Tool

Provides Headings Blocks for the Editor.js.

Installation

Install via NPM

Get the package

npm i --save @editorjs/header

Include module at your application

constHeader=require('@editorjs/header');

Download to your project's source dir

1. Upload folder dist from repository
2. Add dist/bundle.js file to your page.

Load from CDN

You can load specific version of package from jsDelivr CDN.

https://cdn.jsdelivr.net/npm/@editorjs/header@latest

Then require this script on page with Editor.js.

<scriptsrc="..."></script>

Usage

Add a new Tool to the tools property of the Editor.js initial config.

vareditor=EditorJS({
...
tools: {
...
header: Header,},
...
});

Shortcut

You can insert this Block by a useful shortcut. Set it up with the tools[].shortcut property of the Editor's initial config.

vareditor=EditorJS({
...
tools: {
...
header: {class: Header,shortcut: 'CMD+SHIFT+H',},},
...
});

Config Params

All properties are optional.

Field	Type	Description
placeholder	string	header's placeholder string
levels	number[]	enabled heading levels
defaultLevel	number	default heading level

vareditor=EditorJS({
...
tools: {
...
header: {class: Header,config: {placeholder: 'Enter a header',levels: [2,3,4],defaultLevel: 3}}}
...
});

Tool's settings

You can select one of six levels for heading.

Output data

Field	Type	Description
text	string	header's text
level	number	level of header: 1 for H1, 2 for H2 ... 6 for H6

{
"type": "header",
"data": {
"text": "Why Telegram is the best messenger",
"level": 2
}
}