Heading Tool

May 27, 2025 ยท View on GitHub

Version of EditorJS that the plugin is compatible with

Provides Headings Blocks for the Editor.js.

Installation

Install via NPM

Get the package

npm i --save editorjs-header-with-alignment

Include module at your application

const Header = require("editorjs-header-with-alignment");

Download to your project's source dir

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

Usage

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

var editor = EditorJS({
  ...

  tools: {
    ...
    header: Header,
  },

  ...
});

Config Params

All properties are optional.

FieldTypeDescription
placeholderstringheader's placeholder string
levelsnumber[]enabled heading levels
defaultLevelnumberdefault heading level
defaultAlignmentstringdefault alignment level
var editor = EditorJS({
  ...

  tools: {
    ...
    header: {
      class: Header,
      config: {
        placeholder: 'Enter a header',
        levels: [2, 3, 4],
        defaultLevel: 3,
        defaultAlignment: 'left'
      }
    }
  }

  ...
});

Output data

FieldTypeDescription
textstringheader's text
levelnumberlevel of header: 1 for H1, 2 for H2 ... 6 for H6
alignstringheder alignment: 'left', 'center', 'justify', 'right
{
  "type": "header",
  "data": {
    "text": "Why Telegram is the best messenger",
    "level": 2,
    "align": "left"
  }
}