/editorjs-alerts

Alert banners for Editor.js

Primary LanguageJavaScriptMIT LicenseMIT

Alerts block tool for Editor.js

This block tool provides alert banners for Editor.js. The tool also provides configuration to choose from different styles (see Styles) and to enable alignment options.

Preview

Block Tool

alerts

Block Settings

settings

Styles

Pastel (Default)

pastel

Solid

solid

Outlined

outlined

Installation

Using npm

npm install @coolbytes/editorjs-alerts

Using yarn

yarn add @coolbytes/editorjs-alerts

Usage

Include it in the tools property of Editor.js config:

const editor = new EditorJS({
  tools: {
    alert: Alert
  }
});

Config Params

Field Type Optional Default Description
alertTypes string[] Yes ['info', 'success', 'blocked', 'warning', 'danger'] All supported alert types
defaultAlertType string Yes 'info' Preferred alert type
alertStyles string[] Yes ['pastel', 'solid', 'outlined'] All supported alert styles
defaultAlertStyle string Yes 'pastel' Preferred alert style
alignTypes string[] Yes ['left', 'center', 'right', 'justify'] All supported alignment options
defaultAlignType string Yes 'left' Preferred alignment type

 

const editor = EditorJS({
  tools: {
    alert: {
      class: Alert,
      config: {
        alertTypes: ['info', 'success', 'blocked', 'warning', 'danger'],
        defaultAlertType: 'info',
        alertStyles: ['pastel', 'solid', 'outlined'],
        defaultAlertStyle: 'pastel',
        alignTypes: ['left', 'center', 'right', 'justify'],
        defaultAlignType: 'left'
      }
    }
  }
});

Output data

Field Type Description
text string Alert's text
alert string Alert type
alertStyle string Alert style
align string Alignment type

 

Example:

{
  "time": 1715969561758,
  "blocks": [
    {
      "id": "_K5QcJHHuK",
      "type": "alert",
      "data": {
        "text": "This is an info alert",
        "alert": "info",
        "alertStyle": "pastel",
        "align": "left"
      }
    }
  ],
  "version": "2.29.1"
}