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
const Header = require('@editorjs/header');
Download to your project's source dir
- Upload folder
dist
from repository - 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.
<script src="..."></script>
Usage
Add a new Tool to the tools
property of the Editor.js initial config.
var editor = 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.
var editor = 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 |
var editor = 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
}
}