kaaaaaaaaaaai / editorjs-button

button plugin for Editor.js

Set Link and Text and Generate button plugin for Editor.js

Installation

Install via NPM

Get the package

npm i --save editorjs-button

Include module at your application

const anyButton = require('anyButton');

Download to your project's source dir

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

Load from CDN

https://cdn.jsdelivr.net/npm/[email protected]

Usage

Add a new Tool to the tools property of the Editor.js initial config.

tools: {
        AnyButton: {
          class: AnyButton,
          inlineToolbar: false,
          config:{
            css:{
              "btnColor": "btn--gray",
            }
          }
        },
      },
      i18n: {
        messages: {
          tools: {
            "AnyButton": {
              'Button Text': 'ボタンに表示するテキスト',
              'Link Url': 'ボタンの飛び先のURL',
              'Set': "設定する",
              'Default Button': "デフォルト",
            }
          }
        },
      },
}

Config Params

i18n overwrite if want to change default placeholder text,

i18n: {
    messages: {
      tools: {s
        "AnyButton": {
          'Button Text': 'ボタンに表示するテキスト',
          'Link Url': 'ボタンの飛び先のURL',
          'Set': "設定する",
          'Default Button': "デフォルト",
        }
      }
    },
},

if customize css, input filed, button design, and etc...

config:{
    css:{
      "btnColor": "btn--gray",
    }
}

Output data

Field	Type	Description
link	string	Exclusion HTML Tag text
text	string	Exclusion HTML Tag text

{
            "type" : "AnyButton",
            "data" : {
                "link" : "https://editorjs.io/",
                "text" : "editorjs official"
            }
        }

editorjs-button's Issues

Error in doc for require

Hello !

The good call is const AnyButton = require('editorjs-button'); instead of const anyButton = require('anyButton');

Nice job !

Bye !

Using .btn for base class conflicts with Bootstrap, etc.

Any CSS framework that uses the .btn CSS class for buttons (such as Bootstrap) seems to conflict with how this EditorJS plugin is designed to style its button instances.

Rendering EditorJS within a Bootstrap-styled page, for example, has caused all surrounding buttons to lose their background colour. It was rather worrying at first until I noticed that this plugin is sharing the .btn CSS class.

I'm going to see if I can get EditorJS to render inside of a Shadow DOM, which should solve this issue.

Use of eval in "node_modules/editorjs-button/dist/bundle.js" is strongly discouraged as it poses security risks and may cause issues with minification.

"editorjs-button": "~1.0.4",

Toggle button visible in readOnly mode

You can still see the toggle button in readOnly mode:

Expected behaviour: Toggle button should be hidden and not accessible

Readonly mode not supported

Hi @kaaaaaaaaaaai,
First of all, thank you very much for all the contribution you have done to the editiorjs. I really appreciate for your hard work. I liked this tool for editorjs but this tool cannot be used for readonly. It shows error. It would really be great if you make this compatible with readonly mode.
Also add a sponsor button for this project.
Regards

Style conflict in application using bootstrap

When I use editorjs-button in a project using bootstrap, the layout of other buttons.
Looks like editorjs-button is modifying the style of the class btn.
Instead, can editorjs-button us as class something like ejs-btn and ejs-btn--primary?