This Editor.js block tool extends @editorjs/header to include alignment options (see Preview).
Using npm
npm install @coolbytes/editorjs-headerUsing yarn
yarn add @coolbytes/editorjs-headerInclude it in the tools property of Editor.js config:
const editor = new EditorJS({ tools: { header: Header } });| Field | Type | Optional | Default | Description |
|---|---|---|---|---|
| placeholder | string | Yes | '' | Placeholder text when empty |
| levels | number[] | Yes | [1, 2, 3, 4, 5, 6] | All supported header levels |
| defaultLevel | number | Yes | 1 | Preferred header level |
| alignTypes | string[] | Yes | ['left', 'center', 'right', 'justify'] | All supported alignment options |
| defaultAlignType | string | Yes | 'left' | Preferred alignment type |
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 |
| level | number | Header level |
| align | string | Alignment type |
Example:
{ "time": 1715969561758, "blocks": [ { "id": "_K5QcJHHuK", "type": "header", "data": { "text": "Cool Bytes", "level": 1, "align": "center" } } ], "version": "2.29.1" }