editorjs-alert
v1.1.4
Published
Editor.js tool for adding colorful alerts
Downloads
19,654
Maintainers
Readme
Editor.js Alert Tool
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.
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: {
alertTypes: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],
defaultType: 'primary',
messagePlaceholder: 'Enter something',
},
},
},
//...
});
Config Params
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 Alert`s message
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
|
| align | string
| Align type should be one of left
, center
or right
|
{
"type": "alert",
"data": {
"type": "danger",
"align" : "center",
"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.
Publishing to NPM
- Run
yarn build
to build the production bundle, bump the version inpackage.json
. - Commit and push the changes.
- Create a release new tag for the bumped version (e.g.
git tag v1.0.2
). - Push the tag using
git push --tags
. - Publish the package to NPM using
yarn publish
.
License
This project is licensed under the MIT License.