Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kaaaaaaaaaaai/editorjs-button

button plugin for Editor.js
https://github.com/kaaaaaaaaaaai/editorjs-button

Last synced: 26 days ago
JSON representation

button plugin for Editor.js

Awesome Lists containing this project

README

        

![](https://badgen.net/badge/Editor.js/v2.22.3/blue)

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

![画面収録 2020-12-13 16 59 53](https://user-images.githubusercontent.com/2194021/102006852-7a6fb880-3d67-11eb-98d2-20b7e88672df.gif)

### change log
- v2.x
- toggle menu button
- v3.x
- delete toggle button, and integration blockTune menu
- icon update

## Installation

### Install via NPM

Get the package

```shell
npm i --save editorjs-button
```

Include module at your application

```javascript
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/editorjs-button@latest`

## Usage

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

```javascript
tools: {
AnyButton: {
class: AnyButton,
inlineToolbar: false,
config:{
css:{
"btnColor": "btn--gray",
},
textValidation: (text) => {
console.log("error!", text)
return true;
},
linkValidation: (text) => {
console.log("error!", text)
return false;
}
}
},
},
i18n: {
messages: {
tools: {
"AnyButton": {
'Button Text': 'ボタンに表示するテキスト',
'Link Url': 'ボタンの飛び先のURL',
'Set': "設定する",
'Default Button': "デフォルト",
}
}
},
},
}
```
## input field validation

if you want to validate input field, you can use `textValidation` and `linkValidation` function.

## 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 |

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