Link inline tool for Editor.js
npm install @coolbytes/editorjs-linkThis Editor.js inline tool enables users to add or remove a hyperlink. This takes inspiration from editorjs-hyperlink and makes some adjustments.
A few points to note:
* This inline tool can be accessed from the Inline Toolbar (see Preview).
* The inline button functions as a toggle, allowing you to show or hide the action menu.
* When a link already exists in the selected text, the action menu automatically detects it and gives you the option to Remove it.
Using npm
``sh`
npm install @coolbytes/editorjs-link
Using yarn
`sh`
yarn add @coolbytes/editorjs-link
Include it in the tools property of Editor.js config:
`js`
const editor = new EditorJS({
tools: {
link: Link
}
});
|Field|Type|Optional|Default|Description|
|---|---|---|---|---|
|shortcut|string|Yes|'CMD+L'|Shortcut to toggle link action menu|string
|placeholder||Yes|'Enter URL'|Placeholder text for URL|string[]
|targets||Yes|['_self', '_blank', '_parent', '_top']|All supported link targets|string
|defaultTarget||Yes|'_self'|Preferred link target|string[]
|relations||Yes|['', 'alternate', 'author', 'bookmark', 'canonical', 'external', 'help', 'license', 'manifest', 'me', 'next', 'nofollow', 'noopener', 'noreferrer', 'prev', 'search', 'tag']|All supported link rels|string
|defaultRelation||Yes|''|Preferred link rel|boolean
|validate||Yes|true|Defines if an URL should be validated|
`js`
const editor = EditorJS({
tools: {
link: {
class: Link,
config: {
shortcut: 'CMD+L',
placeholder: "Enter URL",
targets: ['_self', '_blank', '_parent', '_top'],
defaultTarget: '_self',
relations: ['', 'alternate', 'author', 'bookmark', 'canonical', 'external', 'help', 'license', 'manifest', 'me', 'next', 'nofollow', 'noopener', 'noreferrer', 'prev', 'search', 'tag'],
defaultRelation: '',
validate: true
}
}
}
});
The block output would include a hyperlink ( tag) with ce-link CSS class.
Example for Paragraph Tool:
`json``
{
"type": "paragraph",
"data": {
"text": "This is some hyperlink to demonstrate."
}
}