Button to set link and text for Editor.js
npm install editorjs-button
Get the package
``shell`
npm i --save editorjs-button
Include module at your application
`javascript`
const anyButton = require('anyButton');
1. Upload folder dist from repositorydist/bundle.js
2. Add file to your page.
https://cdn.jsdelivr.net/npm/editorjs-button@latest
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.
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",
}
}
| Field | Type | Description |
| ------ | -------- | ---------------- |
| link | string | Exclusion HTML Tag text |string
| text | | Exclusion HTML Tag text |
`json``
{
"type" : "AnyButton",
"data" : {
"link" : "https://editorjs.io/",
"text" : "editorjs official"
}
}