CKEditor link decorators: save a download choice with the link

CKEditor 5 link decorators add attributes to links. A manual decorator gives the author a switch, such as “Download file.” An automatic decorator derives attributes from the destination. Choose one owner for each attribute so two decorators do not write conflicting values. Official link documentation

An original workshop pack contains a link to a worksheet and another to a reference website. The editor needs to mark the worksheet for download while leaving ordinary references alone. Changing the words “Download worksheet” does not add a download attribute to the saved anchor.

Define the author-controlled download option

Merge this fragment into a CKEditor 5 setup that already includes Link:

const workshopLinkOptions = {
  link: {
    decorators: {
      downloadWorksheet: {
        mode: 'manual',
        label: 'Download file',
        defaultValue: false,
        attributes: {
          download: 'download'
        }
      }
    }
  }
};

Retain the application's other link settings, plugins, toolbar, and supported distribution configuration. This object describes a decorator; it does not initialize an editor or create the worksheet file.

The decorator adds a switch in the link interface. With the switch enabled, saved data for the illustrative worksheet can contain:

<a href="/workshop/worksheet.pdf" download="download">Worksheet</a>

The attribute expresses a browser download hint. Actual download behavior depends on the destination and browser rules, including origin and the response headers. A file on another host may open instead. Test the actual worksheet URL in the reader page before promising that every reader will receive a downloaded file.

Use automatic decorators for a destination rule

For example, an application may want links with HTTPS destinations to carry a class used by its reader stylesheet:

const httpsLinkDecorator = {
  mode: 'automatic',
  callback: url => /^https:\/\//i.test(url),
  classes: 'https-reference'
};

This original predicate illustrates classification, not an endorsement or URL safety check. Add it as another named entry in link.decorators only if that classification serves the application. The class's appearance requires the reader stylesheet. It does not alter the link label. Current documentation uses classes and styles as decorator properties; placing class or style inside attributes is deprecated.

A manual choice is appropriate for a decision the URL cannot establish, such as whether a worksheet should be offered for download. An automatic rule suits attributes consistently derived from the URL. Do not give both rules ownership of download, or combine unrelated decorators that overwrite the same class, target, or rel value.

Avoid overlapping new-window settings

CKEditor documents addTargetToExternalLinks as a convenient automatic external-link rule. If the application instead defines its own decorator for target and rel, review that option before enabling both. Conflicting decorators are not reconciled into an application policy automatically.

The Tiptap link guide covers changing a destination while preserving its label in another editor. This CKEditor task concerns attributes stored alongside the destination; selection handling alone cannot preserve a missing decorator.

In a development workshop pack, enable Download file on the worksheet and leave it off on the reference website. Save and reopen the pack through the actual application's filtering and storage. Inspect both anchors and the restored switch state. Then open the worksheet from the reader page and observe its real download behavior. The useful outcome is a saved author choice that survives editing and behaves as expected for that file.

Keep reading