Contribute to this guideReport an issue

guideLink

The Link feature brings support for link editing to the editor. It allows for inserting hyperlinks into the edited content and offers the UI to create and edit them.

# Demo

You can edit existing links by clicking them and using the balloon. Use the Link toolbar button or press Ctrl/⌘+K to create a new link.

CKEditor 5 allows for 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 (by default: blue), typing and and applying formatting will be done within its boundaries:

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 the link:

The animation showing typing before the link in CKEditor 5 rich text editor.

# Installation

This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom rich text editor.

To add this feature to your editor, install the @ckeditor/ckeditor5-link package:

npm install --save @ckeditor/ckeditor5-link

Then add the 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( ... );

# Common API

The Link plugin registers the UI button component ('link') and the following commands:

The commands can be executed using the editor.execute() method:

// Applies the link to the selected content.
// When the selection is collapsed, it creates 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 model using the linkHref attribute.

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-link.