Link Button Block for Editor.js

Allows to add a customizable link-button with the caption

Preview

Installation

Install via NPM

Get the package

$ npm i editorjs-link-button

Include module at your application

import LinkButton from 'editorjs-link-button';

Load from CDN

You can load a specific version of the package from jsDelivr CDN.

Require this script on a page with Editor.js.

<script src="https://cdn.jsdelivr.net/npm/editorjs-link-button"></script>

Download to your project's source dir

1. Upload folder dist from repository
2. Add dist/bundle.js file to your page.

Usage

var editor = EditorJS({
  // ...
  tools: {
    // ...
    linkButton: LinkButton
  },
  // ...
});

Config Params

You can add custom color tunes or disabled it

new Editorjs({
  // ...
  tools: {
    linkButton: {
        class: LinkButton,
        config: {
            colors: [
                {
                    name: 'tune1',
                    icon: 'Tune1',
                    title: 'Tune1',
                },
                {
                    name: 'tune2',
                    icon: 'Tune2',
                    title: 'Tune2',
                }
            ]
        }
    },
  },
})

Output data

{
    "type" : "linkButton",
    "data" : {
        "url" : "https://example.com",
        "caption" : "Button caption",
        "color" : "blue"
    }
}