Editor.js tool for adding colorful alerts
npm install editorjs-alert !Version of EditorJS that the plugin is compatible with
Provides Alert blocks for the Editor.js.
- 8 different alert block styes
- Convert from other blocks into an Alert block
- Convert an Alert block into other blocks
Watch this tool in action in the following short GIF movie.

Try it out yourself on the demo page.
Get the package
``sh`
npm i --save editorjs-alert
Include module at your application
`js
const Header = require('editorjs-alert');
// OR
import Alert from 'editorjs-alert';
`
Copy dist/bundle.js file to your page.
You can load specific version of package from jsDelivr CDN.
`html`
Add a new Tool Alert to the tools property of the Editor.js initial config.
`js
var editor = EditorJS({
// ...
tools: {
// ...
alert: Alert,
},
// ...
});
`
Or initialize Alert tool with additional optional settings
`js
var editor = EditorJS({
//...
tools: {
//...
alert: {
class: Alert,
inlineToolbar: true,
shortcut: 'CMD+SHIFT+A',
config: {
alertTypes: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],
defaultType: 'primary',
messagePlaceholder: 'Enter something',
},
},
},
//...
});
`
All properties are optional.
| Field | Type | Default Value | Description |
| -------------------- | -------- | -------------- | -------------------------------------------------------------------------------------------------------------------------- |
| alertTypes | array | ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'] | Alert types that can be used in the editor |defaultType
| | string | info | default Alert type (should be either of primary, secondary, info, success, warning, danger, light or dark) |defaultAlign
| | string | left | default Alert alignment (should be either of left, center or right) |messagePlaceholder
| | string | Type here... | placeholder to show in Alerts message
| Field | Type | Description |
| ------- | -------- | --------------------------------------------------------------------------------------------------------- |
| message | string | Alert message |
| type | string | Alert type among one of primary, secondary, info, success, warning, danger, light or dark |
| align | string | Align type should be one of left, center or right |
``json`
{
"type": "alert",
"data": {
"type": "danger",
"align" : "center",
"text": "Holy smokes!
Something seriously bad happened."
}
}
- Run yarn install.yarn dev
- Run to continuously watch for the changes made in ./src/index.js and updates a development bundle under ./dist folder../examples/development.html
- Open in the browser to verify the tool's functionality.
- Run yarn build to build the production bundle, bump the version in package.json.git tag v1.0.2
- Commit and push the changes.
- Create a release new tag for the bumped version (e.g. ).git push --tags
- Push the tag using .yarn publish`.
- Publish the package to NPM using
This project is licensed under the MIT License.