Notice with caption Block Tune for Editor.js

Tune for Editor.js adding color notice with caption for any block.

Caption field will be shown only for the first block of one type.

Installation

Install via NPM

Get the package

$ npm i editorjs-notice

Include module at your application

import NoticeTune from 'editorjs-notice';

Load from CDN

You can load a specific version of the package from jsDelivr CDN.

Require this script on a page with Editor.js.

<script src="https://cdn.jsdelivr.net/npm/editorjs-notice"></script>

Download to your project's source dir

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

Usage

For all blocks

var editor = EditorJS({
  // ...
  tools: {
    // ...
    noticeTune: NoticeTune
  },
  tunes: ['noticeTune']
  // ...
});

For certain blocks

var editor = EditorJS({
  // ...
  tools: {
    // ...
    noticeTune: NoticeTune,
    header: {
      class: Header,
      tunes: ['noticeTune']
    }
  }
  // ...
});

Config Params

You can add a localized string into notice caption placeholder

new Editorjs({
  // ...
  tools: {
    noticeTune: NoticeTune
  },
  i18n: {
    tools: {
      noticeTune: {
        'Notice caption': 'Заголовок'
      }
    }
  },
})

Output data

If style is not set, then the tune data will not be serialized into JSON. Also data returns in this format: | Field | Type | Description | | ----- | -------- | ------------------ | | style | string | (spoiler or info or warning) Notice style | | caption | string | Notice caption |

{
  // Block data
  "tunes": {
    "noticeTune": {
      "style": "spoiler",
      "caption": "Hidden content"
    }
  }
}