CODEWITHSUNDEEP
ckeditorckeditor5
izumeroot
izumeroot

Reputation: 542

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

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

enter image description here

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

Upvotes: 11

Views: 4658

Answers (2)

Biswa
Biswa

Reputation: 520

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.

Upvotes: 3

Mateusz
Mateusz

Reputation: 683

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 //.

Upvotes: 3

Related Questions