CKEditor 5 links: Set default target for links or edit target

Question

In CKEditor 5 I don't see field for target attribute in link dialog.

How to add such field? Or set target=_blank as default. Thanks

Answer 1

You can achieve it by adding this code in CKEditor Initialization Script:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ...
        link: {
            decorators: {
                openInNewTab: {
                    mode: 'manual',
                    label: 'Open in a new tab',
                    defaultValue: true,         // This option will be selected by default.
                    attributes: {
                        target: '_blank',
                        rel: 'noopener noreferrer'
                    }
                }
            }
        }
    } )
    .then( ... )
    .catch( ... );

Here is the Documentation Link . It will be working fine.

Answer 2

Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.

There might be manual or automatic decorators.

First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".

Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.

There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.