title: Link
The {@link module:link/link~Link} plugin brings the link editing to the editor. It allows links in the edited content and offers the UI to create and edit them.
You can edit existing links by clicking them and using the balloon. Use the toolbar button press or press Ctrl/⌘+K to create new links.
{@snippet features/link}
CKEditor 5 allows typing both at inner and outer boundaries of links to make the editing easier for the users.
To type inside a link, move the caret to its (start or end) boundary. As long as the link remains highlighted blue, typing and and applying formatting will be done within its boundaries:
{@img assets/img/typing-inside.gif 770 The animation showing typing inside the link in CKEditor 5 rich text editor.}
To type before or after a link, move the caret to its boundary, then press the arrow key (→ or ←) once. The link is no longer highlighted and whatever text you type or formatting you apply will not be enclosed by a link:
{@img assets/img/typing-before.gif 770 The animation showing typing before the link in CKEditor 5 rich text editor.}
This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom editor.
To add this feature to your editor, install the @ckeditor/ckeditor5-link package:
npm install --save @ckeditor/ckeditor5-link
Then add Link plugin to your plugin list:
import Link from '@ckeditor/ckeditor5-link/src/link';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Link, ... ],
toolbar: [ 'link', ... ],
} )
.then( ... )
.catch( ... );
The {@link module:link/link~Link} plugin registers the UI button component ('link') and the following commands:
'link' command implemented by {@link module:link/linkcommand~LinkCommand}.'unlink' command implemented by {@link module:link/unlinkcommand~UnlinkCommand}.which can be executed using the {@link module:core/editor/editor~Editor#execute editor.execute()} method:
// Applies the link to the selected content.
// When the selection is collapsed, it creates a new text wrapped in a link.
editor.execute( 'link', 'http://example.com' );
// Removes the link from the selection.
editor.execute( 'unlink' );
Links are represented in the {@link module:engine/model/model~Model model} using the linkHref attribute.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-link.