Link

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.

Valletta

The capital city of Malta is the top destination this summer. It’s home to a cutting-edge contemporary architecture, baroque masterpieces, delicious local cuisine and at least 8 months of sun.

It’s also a top destination for filmmakers, so you can take a tour through locations familiar to you from Game of Thrones, Gladiator, Troy and many more.

# Typing around links

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 'link' command implemented by LinkCommand.
The 'unlink' command implemented by UnlinkCommand.

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.

# Contribute

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