https://github.com/editor-js/header

Header Tool for Editor.js 2.0
https://github.com/editor-js/header

codex codex-editor editor header plugin text

Last synced: about 1 month ago
JSON representation

Header Tool for Editor.js 2.0

• Host: GitHub
• URL: https://github.com/editor-js/header
• Owner: editor-js
• License: mit
• Created: 2017-08-31T00:17:16.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-07-13T13:56:02.000Z (2 months ago)
• Last Synced: 2024-07-29T09:46:41.641Z (about 2 months ago)
• Topics: codex, codex-editor, editor, header, plugin, text
• Language: TypeScript
• Homepage:
• Size: 409 KB
• Stars: 95
• Watchers: 6
• Forks: 122
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-editorjs - @editorjs/header

README

        
# Heading Tool

![Version of EditorJS that the plugin is compatible with](https://badgen.net/badge/Editor.js/v2.0/blue)

Provides Headings Blocks for the [Editor.js](https://ifmo.su/editor).

## Installation

Get the package

```shell

yarn add @editorjs/header

```

Include module at your application

```javascript

import Header from '@editorjs/header';

```

Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/header@latest)

## Usage

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

```javascript

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.

```javascript

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       |

```javascript

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](https://capella.pics/634ad545-08d7-4cb7-8409-f01289e0e5e1.jpg)

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 |

```json

{

  "type": "header",

  "data": {

    "text": "Why Telegram is the best messenger",

    "level": 2

  }

}

```