1.0.0 • Published 6 years ago
@ikbenbas/editorjs-button v1.0.0
Button
Button for the Editor.js.
Features
Allows to add a button link to a given url.
Installation
Install via NPM
Get the package
npm i @ikbenbas/editorjs-buttonInclude module at your application
const Button = require('@ikbenbas/editorjs-button');Download to your project's source dir
- Download folder
distfrom repository - Add
dist/bundle.jsfile to your page.
Usage
Add the Button to the tools property of the Editor.js initial config.
This Button can have to following configuration:
| Field | Type | Description |
|---|---|---|
| label | string | Default text label |
| target | string | Default target: One of the following options: _self, _blank, _parent or _top |
| classes | array | Extra classes added to the button in the editor for a better wysiwyg result |
var editor = EditorJS({
...
tools: {
...
button: {
class: Button,
config: {
label: "Click",
target: "_blank",
classes: ["button", "is-primary"]
}
}
}
...
});Output data
This Tool returns data with following format:
| Field | Type | Description |
|---|---|---|
| url | string | Link url |
| label | string | Text label on the button |
| target | string | One of the following options: _self, _blank, _parent or _top |
| centered | boolean | true or false; Button aligned centered or not |
| stretched | boolean | true or false; Button full width or not |
| large | boolean | true or false; Button size large or not |
{
"type": "button",
"data": {
"url": "http://www.example.com",
"label": "Click me!",
"target": "_self",
"centered": true,
"stretched": false,
"large": true
}
}Side note: I created this plugin as a small project while learning TypeScript. I'm still working on it, and still learning. So don't judge me too harshly ;)