Nocturnal Prancing Mosquito

    @editorjs/header
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/editorjs__header package

    2.6.2 • Public • Published

    Heading Tool

    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

    Include module at your application

    const Header = require('@editorjs/header');

    Download to your project's source dir

    1. Upload folder dist from repository
    2. 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

    An image showing the header block tool

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

    Install

    npm i @editorjs/header

    DownloadsWeekly Downloads

    16,218

    Version

    2.6.2

    License

    MIT

    Unpacked Size

    26.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • codex-team