Editor.js summary Tool
Provides Summary blocks for the Editor.js.
Features
- 8 different summary block styes
- Convert from other blocks into an Summary block
- Convert an Summary 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-summary
Include module at your application
const Summary = require('editorjs-summary');
// OR
import Summary from 'editorjs-summary';
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-summary@latest"></script>
Usage
Add a new Tool summary
to the tools
property of the Editor.js initial config.
var editor = EditorJS({
// ...
tools: {
// ...
summary: Summary,
},
// ...
});
Or initialize Summary tool with additional optional settings
var editor = EditorJS({
//...
tools: {
//...
summary: {
class: Summary,
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 Summary type (should be either of primary , secondary , info , success , warning , danger , light or dark ) |
messagePlaceholder |
string |
Type here... |
placeholder to show in Summary`s message input |
Output data
Field | Type | Description |
---|---|---|
message | string |
Summary message |
type | string |
Summary type among one of primary , secondary , info , success , warning , danger , light or dark
|
{
"type": "summary",
"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.