In this section you will get some more details on customizing CKEditor 5 regarding required customizations for link editing behavior based on the Link feature of CKEditor 5. For general information, like, how to configure https:// as default protocol for links, please have a look at the corresponding feature documentation.

This section is recommended to be read, if you are about to implement support for editing custom attributes, that are bound to links.

More specifically, it is about an assistive plugin LinkAttributes, that helps to manage link-related attributes. The plugin is bundled in npm package @coremedia/​ckeditor5-link-common. For more details regarding the plugins consult CoreMedia CKEditor 5 Plugin: LinkAttributes.

Default Plugins

The default CKEditor 5 configuration ckeditorDefault.ts (@coremedia-blueprint/​studio-client.​ckeditor5) contains these main plugins provided by CoreMedia:

They are responsible to enable linking to content items as well as to provide support for target attribute editing. For details see Section 10.1.2.6, “Link Plugins”.

Custom Link Attributes

Along with the plugins listed in Section “Default Plugins” ckeditorDefault.ts also refers to a plugin called LinkAttributes. This plugin may be important, when it is about adding support for additional attributes bound to links.

This plugin can be summarized as to integrate into typical link attribute editing and clean-up behavior as implemented by CKEditor 5 Link feature. This includes the so-called two-step-caret-movement (see TwoStepCaretMovement) as well as removing all link-related attributes on removing links.

Prefer CKEditor 5 API, if available

If CKSource provides an API for CKEditor 5 to register such link-related attributes, it is preferred to use that one, as it is assumed to cover more use-cases.

The plugin provides two configuration layers:

CKEditor 5 Instance Configuration: ckeditorDefault.ts ships with a configuration for attributes, that are part of CoreMedia Rich Text 1.0, but not yet covered by corresponding editing features.

import { LinkAttributesConfig } from
  "@coremedia/ckeditor5-link-common/LinkAttributesConfig";

export const linkAttributesConfig: LinkAttributesConfig = {
  attributes: [
    {
      view: "title",
      model: "linkTitle",
    },
    {
      view: "data-xlink-actuate",
      model: "linkActuate",
    },
  ],
};

Example 10.10, “LinkAttributes Configuration” shows a configuration for attributes title and data-xlink-actuate, that are a result of the default data-processing for CoreMedia Rich Text 1.0 (see Section 10.1.2.7, “Rich Text Plugin”) of attributes xlink:title and xlink:actuate.

import Link from '@ckeditor/ckeditor5-link/src/link';
import { LinkAttributes } from "@coremedia/ckeditor5-link-common/LinkAttributes";
import { linkAttributesConfig } from "./linkAttributesConfig";

return ClassicEditor.create(domElement, {
  /* ... */
  plugins: [
    /* ... */
    Link,
    LinkAttributes,
    /* ... */
  ],
  link: {
    defaultProtocol: 'https://',
    ...linkAttributesConfig,
  },
});

/* ... */

Example 10.11, “LinkAttributes Configuration Usage” demonstrates the integration into ckeditorDefault.ts merging the configuration with the configuration of the CKEditor 5 Link feature. Plugin LinkAttributes will parse this configuration and trigger corresponding configuration for two-step-caret-movement and link-attribute clean-up.

import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
import { getLinkAttributes, LinkAttributes } from
  "@coremedia/ckeditor5-link-common/LinkAttributes";

export class MyLinkTitleEditing extends Plugin {
  static readonly pluginName: string = "MyLinkTitleEditing";

  static readonly requires = [LinkAttributes, /* ... */];

  init(): void {
    const { editor } = this;

    getLinkAttributes(editor)?
      .registerAttribute({ view: "title", model: "linkTitle" });
  }
}

Example 10.12, “LinkAttributes at Plugin Initialization” is a typical usage from within plugins. Here, a plugin provides capabilities for link title editing. It is recommended to move the configuration for this attribute to the plugin initialization then.

Thus, if you have any custom attribute to edit, that is only valid in context of links, we recommend using LinkAttributes to register this attribute, or, as alternative, carefully review and adapt behaviors as can be found in sources of the CKEditor 5 Link plugin.