This 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
npm install @coolbytes/editorjs-link
Using yarn
yarn add @coolbytes/editorjs-link
Include it in the tools
property of Editor.js config:
const editor = new EditorJS({
tools: {
link: Link
}
});
Field | Type | Optional | Default | Description |
---|---|---|---|---|
shortcut | string |
Yes |
'CMD L' | Shortcut to toggle link action menu |
placeholder | string |
Yes |
'Enter URL' | Placeholder text for URL |
targets | string[] |
Yes |
['_self', '_blank', '_parent', '_top'] | All supported link targets |
defaultTarget | string |
Yes |
'_self' | Preferred link target |
relations | string[] |
Yes |
['', 'alternate', 'author', 'bookmark', 'canonical', 'external', 'help', 'license', 'manifest', 'me', 'next', 'nofollow', 'noopener', 'noreferrer', 'prev', 'search', 'tag'] | All supported link rels |
defaultRelation | string |
Yes |
'' | Preferred link rel |
validate | boolean |
Yes |
true |
Defines if an URL should be validated |
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 (<a>
tag) with ce-link
CSS class.
Example for Paragraph Tool:
{
"type": "paragraph",
"data": {
"text": "This is some <a class=\"ce-link\" href=\"https://example.com\" target=\"_self\" rel=\"alternate\">hyperlink</a> to demonstrate."
}
}