Skip to content

bauermarkus/editorjs-alert

 
 

Repository files navigation

Editor.js Alert Tool

npm Version of EditorJS that the plugin is compatible with

Provides Alert blocks for the Editor.js.

Features

  • 8 different alert block styes
  • Convert from other blocks into an Alert block
  • Convert an Alert block into other blocks

How does it look like?

Watch this tool in action in the following short GIF movie.

Alert sneak peek GIF!

Try it out yourself on the demo page.

Installation

Install via NPM

Get the package

npm i --save editorjs-alert

Include module at your application

const Header = require('editorjs-alert');

// OR

import Alert from 'editorjs-alert';

Download to your project's source dir

Copy dist/bundle.js file to your page.

Load from CDN

You can load specific version of package from jsDelivr CDN.

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

Usage

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

var editor = EditorJS({
  // ...

  tools: {
    // ...
    alert: Alert,
  },

  // ...
});

Or initialize Alert tool with additional optional settings

var editor = EditorJS({
  //...

  tools: {
    //...
    alert: {
      class: Alert,
      inlineToolbar: true,
      shortcut: 'CMD+SHIFT+A',
      config: {
        defaultType: 'primary',
        messagePlaceholder: 'Enter something',
      },
    },
  },

  //...
});

Config Params

All properties are optional.

Field Type Default Value Description
defaultType string info default Alert type (should be either of primary, secondary, info, success, warning, danger, light or dark)
messagePlaceholder string Type here... placeholder to show in Alert`s message input

Output data

Field Type Description
message string Alert message
type string Alert type among one of primary, secondary, info, success, warning, danger, light or dark
{
  "type": "alert",
  "data": {
    "type": "danger",
    "text": "<strong>Holy smokes!</strong><br>Something seriously <em>bad</em> happened."
  }
}

Local Development

  • Run yarn install.
  • Run yarn dev to continuously watch for the changes made in ./src/index.js and updates a development bundle under ./dist folder.
  • Open ./examples/development.html in the browser to verify the tool's functionality.

License

This project is licensed under the MIT License.

About

Editor.js tool for adding colorful alerts/callouts

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 83.7%
  • CSS 16.3%