Header block tool for Editor.js
npm install @coolbytes/editorjs-headerThis Editor.js block tool extends @editorjs/header to include alignment options (see Preview).
#### Block Tool
!header
#### Block Settings
!settings
Using npm
``sh`
npm install @coolbytes/editorjs-header
Using yarn
`sh`
yarn add @coolbytes/editorjs-header
Include it in the tools property of Editor.js config:
`js`
const editor = new EditorJS({
tools: {
header: Header
}
});
|Field|Type|Optional|Default|Description|
|---|---|---|---|---|
|placeholder|string|Yes|''|Placeholder text when empty|number[]
|levels||Yes|[1, 2, 3, 4, 5, 6]|All supported header levels|number
|defaultLevel||Yes|1|Preferred header level|string[]
|alignTypes||Yes|['left', 'center', 'right', 'justify']|All supported alignment options|string
|defaultAlignType||Yes|'left'|Preferred alignment type|
`js`
const editor = EditorJS({
tools: {
header: {
class: Header,
config: {
placeholder: 'Start Typing...',
levels: [1, 2, 3, 4, 5, 6],
defaultLevel: 1,
alignTypes: ['left', 'center', 'right', 'justify'],
defaultAlignType: 'left'
}
}
}
});
|Field|Type|Description|
|---|---|---|
|text|string|Header's text|number
|level||Header level|string
|align||Alignment type|
Example:
`json``
{
"time": 1715969561758,
"blocks": [
{
"id": "_K5QcJHHuK",
"type": "header",
"data": {
"text": "Cool Bytes",
"level": 1,
"align": "center"
}
}
],
"version": "2.29.1"
}