Link Plugin
- Features
- link
- Basic Usage
- Custom Link Form
- Link with Class Name Dropdown
- Disable URL Processing
- Enable Link Navigation
- Simplified Link Form
- Custom Keyboard Shortcuts
- Programmatic Link Creation
- Video Link Conversion
- Paste Link Processing
- Plugin Initialization
- Link Dialog Flow
- Form Template Structure
- Paste Processing
- Video URL Processing
- Link Navigation
- Class Name Management
- openLinkDialog
- link Control
- unlink Control
- generateLinkForm.link
- applyLink
- dblclick.link
- click.link
- processPaste.link
- Edge Cases
- Known Issues
- Notes
- Classes
Provides comprehensive link management functionality for the Jodit editor. This plugin adds toolbar buttons for creating, editing, and removing hyperlinks, with features like automatic URL conversion from pasted content, video embed detection, customizable link form with class name support, and link navigation control.
Features
- Link creation dialog with customizable form
- Link editing for existing links
- Unlink button to remove hyperlinks
- Keyboard shortcuts (Ctrl+K / Cmd+K) for quick link insertion
- Automatic URL conversion from pasted content
- Video URL detection and embed conversion (YouTube, Vimeo, etc.)
- Link navigation on double-click (optional)
- Read-only mode link click prevention (optional)
- Class name management (input or select mode)
- "Open in new tab" checkbox
- "No follow" checkbox for SEO control
- Form field references for programmatic access
- Custom form template support
link
Type: object
Main configuration object for link plugin with the following properties:
formTemplate
Type: (editor: IJodit) => IUIForm
Default: Built-in form template function
Custom form template function that returns a UIForm. The default template includes URL input, text input, optional class name field, target checkbox, nofollow checkbox, and action buttons.
Example:
const editor = Jodit.make('#editor', {
link: {
formTemplate: (editor) => {
// Return custom UIForm
return new UIForm(editor, [
new UIInput(editor, { name: 'url', label: 'URL' })
]);
}
}
});
followOnDblClick
Type: boolean
Default: false
When true
, double-clicking a link opens it in a new window/tab.
Example:
const editor = Jodit.make('#editor', {
link: {
followOnDblClick: true
}
});
processVideoLink
Type: boolean
Default: true
When true
, automatically converts video URLs (YouTube, Vimeo, etc.) to embed codes when pasted.
Example:
const editor = Jodit.make('#editor', {
link: {
processVideoLink: true
}
});
processPastedLink
Type: boolean
Default: true
When true
, automatically wraps pasted URLs in <a>
tags.
Example:
const editor = Jodit.make('#editor', {
link: {
processPastedLink: true
}
});
noFollowCheckbox
Type: boolean
Default: true
When true
, shows "No follow" checkbox in link dialog. Sets rel="nofollow"
attribute when checked.
Example:
const editor = Jodit.make('#editor', {
link: {
noFollowCheckbox: true
}
});
openInNewTabCheckbox
Type: boolean
Default: true
When true
, shows "Open in new tab" checkbox in link dialog. Sets target="_blank"
attribute when checked.
Example:
const editor = Jodit.make('#editor', {
link: {
openInNewTabCheckbox: true
}
});
modeClassName
Type: 'input' | 'select'
Default: 'input'
Controls how class name field appears in link dialog:
'input'
: Shows text input for class name'select'
: Shows dropdown select for class name (use withselectOptionsClassName
)
Note: Setting this to a falsy value (like null
or undefined
) will hide the class name field, but TypeScript types only allow 'input'
or 'select'
Example:
// Text input mode
const editor1 = Jodit.make('#editor1', {
link: {
modeClassName: 'input'
}
});
// Select dropdown mode
const editor2 = Jodit.make('#editor2', {
link: {
modeClassName: 'select',
selectOptionsClassName: [
{ value: 'btn-primary', text: 'Primary Button' },
{ value: 'btn-secondary', text: 'Secondary Button' }
]
}
});
selectMultipleClassName
Type: boolean
Default: true
When modeClassName
is 'select'
, enables multiple selection for class names.
Example:
const editor = Jodit.make('#editor', {
link: {
modeClassName: 'select',
selectMultipleClassName: true,
selectOptionsClassName: [
{ value: 'red', text: 'Red' },
{ value: 'bold', text: 'Bold' },
{ value: 'underline', text: 'Underline' }
]
}
});
selectSizeClassName
Type: number
Default: 3
When modeClassName
is 'select'
, sets the visible size (number of options) for the select dropdown.
Example:
const editor = Jodit.make('#editor', {
link: {
modeClassName: 'select',
selectSizeClassName: 5,
selectOptionsClassName: [
{ value: 'class1', text: 'Class 1' },
{ value: 'class2', text: 'Class 2' },
{ value: 'class3', text: 'Class 3' },
{ value: 'class4', text: 'Class 4' },
{ value: 'class5', text: 'Class 5' }
]
}
});
selectOptionsClassName
Type: IUIOption[]
Default: []
When modeClassName
is 'select'
, provides options for the class name dropdown. Each option has value
and text
properties.
Example:
const editor = Jodit.make('#editor', {
link: {
modeClassName: 'select',
selectOptionsClassName: [
{ value: 'btn btn-primary', text: 'Primary Button' },
{ value: 'btn btn-secondary', text: 'Secondary Button' },
{ value: 'btn btn-success', text: 'Success Button' },
{ value: 'link-external', text: 'External Link' },
{ value: 'link-internal', text: 'Internal Link' }
]
}
});
hotkeys
Type: string | string[]
Default: ['ctrl+k', 'cmd+k']
Keyboard shortcuts for opening link dialog. Supports multiple key combinations.
Example:
const editor = Jodit.make('#editor', {
link: {
hotkeys: ['ctrl+k', 'cmd+k', 'ctrl+l']
}
});
preventReadOnlyNavigation
Type: boolean
Default: true
When true
, prevents following links by clicking them when editor is in read-only mode.
Example:
const editor = Jodit.make('#editor', {
link: {
preventReadOnlyNavigation: false // Allow link navigation in read-only mode
}
});
Basic Usage
const editor = Jodit.make('#editor');
// Use link button in toolbar or press Ctrl+K/Cmd+K
Custom Link Form
const editor = Jodit.make('#editor', {
link: {
formTemplate: (editor) => {
return new UIForm(editor, [
new UIInput(editor, {
name: 'url',
label: 'Enter URL',
placeholder: 'https://example.com'
}),
new UIInput(editor, {
name: 'content',
label: 'Link Text'
})
]);
}
}
});
Link with Class Name Dropdown
const editor = Jodit.make('#editor', {
link: {
modeClassName: 'select',
selectMultipleClassName: false,
selectSizeClassName: 4,
selectOptionsClassName: [
{ value: 'btn-primary', text: 'Primary Link' },
{ value: 'btn-secondary', text: 'Secondary Link' },
{ value: 'external-link', text: 'External Link' },
{ value: 'download-link', text: 'Download Link' }
]
}
});
Disable URL Processing
const editor = Jodit.make('#editor', {
link: {
processPastedLink: false, // Don't wrap pasted URLs
processVideoLink: false // Don't convert video URLs to embeds
}
});
Enable Link Navigation
const editor = Jodit.make('#editor', {
link: {
followOnDblClick: true, // Double-click to follow links
preventReadOnlyNavigation: false // Allow clicking links in read-only mode
}
});
Simplified Link Form
const editor = Jodit.make('#editor', {
link: {
noFollowCheckbox: false,
openInNewTabCheckbox: false
}
});
Custom Keyboard Shortcuts
const editor = Jodit.make('#editor', {
link: {
hotkeys: ['ctrl+shift+l', 'cmd+shift+l']
}
});
Programmatic Link Creation
const editor = Jodit.make('#editor');
// Open link dialog programmatically
editor.execCommand('openLinkDialog');
// Listen to link form generation
editor.e.on('generateLinkForm.link', (form, isSelectionA) => {
console.log('Link form generated', form, isSelectionA);
});
// Listen to link application
editor.e.on('applyLink', (jodit, elm, form) => {
console.log('Link applied', elm);
if (form) {
console.log('Form data:', form);
}
});
Video Link Conversion
const editor = Jodit.make('#editor', {
link: {
processVideoLink: true
}
});
// Paste YouTube URL: https://www.youtube.com/watch?v=dQw4w9WgXcQ
// Automatically converts to embed code
Paste Link Processing
const editor = Jodit.make('#editor', {
link: {
processPastedLink: true
}
});
// Paste plain URL: https://example.com
// Automatically wrapped in <a> tag
editor.e.on('processPaste.link', (e, text, insert) => {
console.log('Processing pasted content:', text);
});
Plugin Initialization
- Button Registration: Registers
link
button ininsert
toolbar group - Command Registration: Registers
openLinkDialog
command with hotkeys - Event Listeners: Sets up listeners for:
dblclick.link
(iffollowOnDblClick
enabled)click.link
(for read-only navigation prevention)processPaste.link
(ifprocessPastedLink
enabled)generateLinkForm.link
(form customization)
Link Dialog Flow
- Dialog Opening: User clicks link button or presses hotkey
- Context Detection: Checks if cursor is inside existing link
- Form Generation:
- Fires
generateLinkForm.link
event - Creates form using
formTemplate
- Populates fields if editing existing link
- Fires
- User Input: User fills in URL, text, class name, checkboxes
- Form Submission:
- Validates required fields
- Creates or updates
<a>
element - Applies class names, target, rel attributes
- Fires
applyLink
event
- Selection Restore: Restores cursor position after link creation
Form Template Structure
The default form includes:
- URL Input: Required text input with
url_input
ref - Content Input: Optional text input for link text with
content_input
ref - Class Name Field: Input or select based on
modeClassName
:- Input mode: Text field with
className_input
ref - Select mode: Dropdown with
className_select
ref, usingselectOptionsClassName
- Input mode: Text field with
- Target Checkbox: "Open in new tab" with
target_checkbox
ref (ifopenInNewTabCheckbox
) - NoFollow Checkbox: "No follow" with
nofollow_checkbox
ref (ifnoFollowCheckbox
) - Action Buttons: Unlink and Insert/Update buttons
Paste Processing
When processPastedLink
is enabled:
- Paste Event:
processPaste.link
event triggered - URL Detection: Checks if pasted text is valid URL
- Video Detection: If
processVideoLink
enabled, checks for video URLs - Video Conversion: Converts video URLs to embed codes
- Link Wrapping: Wraps plain URLs in
<a>
tags - Content Insertion: Inserts processed HTML
Video URL Processing
Supports automatic embed conversion for:
- YouTube URLs
- Vimeo URLs
- Other video platforms
The plugin detects video URLs and converts them to appropriate embed codes.
Link Navigation
Double-Click Navigation (when followOnDblClick
is true
):
- User double-clicks link element
- Plugin extracts
href
attribute - Opens link in new window/tab
Read-Only Click Prevention (when preventReadOnlyNavigation
is true
):
- User clicks link in read-only editor
- Plugin prevents default navigation
- Link does not open
Class Name Management
Input Mode (modeClassName: 'input'
):
- User types class name(s) directly
- Multiple classes separated by spaces
Select Mode (modeClassName: 'select'
):
- User selects from predefined options
- Single or multiple selection based on
selectMultipleClassName
- Options defined in
selectOptionsClassName
openLinkDialog
Opens the link creation/editing dialog.
Syntax:
editor.execCommand('openLinkDialog')
Hotkeys: Configured via link.hotkeys
option (default: ['ctrl+k', 'cmd+k']
)
Example:
// Open dialog programmatically
editor.execCommand('openLinkDialog');
// With custom hotkey
const editor = Jodit.make('#editor', {
link: {
hotkeys: ['ctrl+l', 'cmd+l']
}
});
link
Control
Command: Opens link dialog popup
Tooltip: 'Insert link'
Icon: 'link'
Toolbar Group: 'insert'
Popup: true
Opens a dialog with link creation form.
unlink
Control
Command: 'unlink'
Tooltip: 'Unlink'
Icon: 'unlink'
Exec Function: Removes link element from selection
Removes hyperlink formatting from selected text or cursor position.
generateLinkForm.link
Fired when link form is being generated. Allows customization of form before display.
Parameters:
form
: The UIForm instanceisSelectionA
: Boolean indicating if current selection is within an<a>
tag
Example:
editor.e.on('generateLinkForm.link', (form, isSelectionA) => {
console.log('Editing existing link:', isSelectionA);
// Customize form here
});
applyLink
Fired when link is successfully applied or updated.
Parameters:
jodit
: The Jodit editor instanceelm
: The<a>
element that was created or modifiedform
: The form data object (ornull
when called from paste handler)
Example:
editor.e.on('applyLink', (jodit, elm, form) => {
console.log('Link applied:', elm.href);
console.log('Link text:', elm.textContent);
if (form) {
console.log('Form data:', form);
}
});
dblclick.link
Fired when user double-clicks on a link (only when followOnDblClick
is enabled).
Example:
editor.e.on('dblclick.link', (e) => {
console.log('Link double-clicked', e.target);
});
click.link
Fired when user clicks on a link in read-only mode (when preventReadOnlyNavigation
is enabled).
Example:
editor.e.on('click.link', (e) => {
console.log('Link clicked in read-only mode', e.target);
});
processPaste.link
Fired when pasted content is being processed for links (when processPastedLink
is enabled).
Parameters:
e
: Clipboard eventtext
: Pasted text contentinsert
: Function to insert processed HTML
Example:
editor.e.on('processPaste.link', (e, text, insert) => {
console.log('Processing pasted content:', text);
});
Edge Cases
-
Empty URL: Form validation prevents submitting empty or invalid URLs
-
Cursor Inside Link: Editing existing link pre-fills form with current values
-
Text Selection: When text is selected, it becomes link text; otherwise, URL is used as text
-
Class Name Input: Accepts multiple space-separated class names in input mode
-
Class Name Select: In select mode with
selectMultipleClassName: true
, multiple classes can be selected -
Video URL Paste: Video URLs are converted to embeds instead of plain links when
processVideoLink
is enabled -
Plain URL Paste: Plain URLs are automatically wrapped in
<a>
tags whenprocessPastedLink
is enabled -
Read-Only Mode: Links cannot be edited in read-only mode, and navigation is prevented when
preventReadOnlyNavigation
is true -
Double-Click Navigation: Only works when
followOnDblClick
is enabled; otherwise, standard text selection occurs -
Nested Elements: Plugin correctly handles links containing nested elements (spans, images, etc.)
-
Form Refs: Form fields use refs (
url_input
,content_input
,className_input
, etc.) for programmatic access -
Unlink Button: In form, unlink button removes link and closes dialog
Known Issues
- When opening an editor in a mui dialog box and opening the link popup in it, the mui dialog does not allow focus to be passed out. As a result, no field inside form can be focused. Just enable the disableEnforceFocus option. See Issue #879
Notes
- Link button appears in the
insert
toolbar group - Default hotkeys are
Ctrl+K
(Windows/Linux) andCmd+K
(Mac) - The plugin uses popup-based UI for link dialog
- Form template is fully customizable via
formTemplate
option - Class name feature supports both free-text input and predefined select options
- Video embed conversion requires
processVideoLink
to be enabled - URL paste wrapping requires
processPastedLink
to be enabled - The
rel="nofollow"
attribute is used for SEO purposes to indicate non-endorsed links - The
target="_blank"
attribute opens links in new tab/window - Plugin uses event namespacing (
.link
) for clean event removal - All event listeners are automatically cleaned up on editor destruction
- The unlink control removes the entire
<a>
element, not just its attributes - Link navigation in read-only mode can be controlled via
preventReadOnlyNavigation
- Form field references allow programmatic access to form inputs for advanced customization
- The plugin properly handles both creation of new links and editing of existing links
Classes
formTemplate
formTemplate(editor
): IUIForm
Parameters
Name | Type |
---|---|
editor |
IJodit |
Returns
Defined in
jodit/src/plugins/link/template.ts:21