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"
}