CKEditor Anchor Link Documentation

A Drupal module that adds anchor support and a richer link dialog to CKEditor 5, so editors can create in-page jump targets and link to them without touching the HTML source.

What is CKEditor Anchor Link?

CKEditor Anchor Link gives CKEditor 5 in Drupal an Anchor toolbar button. Editors place a named anchor anywhere in the body text, then link to it with a fragment (#my-anchor) from the same page or from anywhere else on the site.

An anchor is written as an id on the <a> element. The name attribute is also read, so content authored before id took over keeps working.

Key features

• Anchor toolbar button: insert, edit and remove named anchors from the CKEditor 5 toolbar.
• Invisible anchor markers: anchors with no text are flagged in the editor so authors can see and select them, while staying invisible on the front end.
• Ids survive on real links: an <a href> that also carries an id keeps both, so a link can be a jump target too.
• Source editing safe: anchor markup round-trips through the Source editing view without being stripped.
• Backwards compatible: the legacy name attribute is supported alongside id, with a post update that widens the allowed HTML of formats already using the plugin.
• Linkit integration: an optional matcher suggests #fragment targets in the Linkit autocomplete.
• Themeable marker: the "INVISIBLE ANCHOR" label can be reworded or restyled entirely from CSS.

Getting started

For content editors

If you write content and need in-page navigation:

• Installation and Setup - Get the module and the editor library in place
• Inserting Anchors - Use the Anchor button in CKEditor 5
• Linking to Anchors - Point links at a fragment, on the same page or across the site
• Common Use Cases - Tables of contents, FAQ jump lists, long-form policy pages

For site administrators

If you configure text formats and editor toolbars:

• Configuration - Add the Anchor button to a text format
• Text Formats and Allowed HTML - What filter_html has to permit, and why
• Linkit Integration - Enable and configure the anchor matcher
• Upgrading - Library versions, post updates and the CKEditor 4 to 5 path

For developers

If you extend or integrate with the module:

• Architecture - How the module, the CKEditor 5 plugin and the library fit together
• Hooks and Plugins - The hook implementations and plugin classes the module ships
• The Linkit Matcher - How anchor suggestions are produced

Testing

• Testing Overview - The two test layers
• Automated Functional Acceptance Testing - The varbase-e2e browser suite
• Running Tests - Locally, in DDEV and with gitlab-ci-local
• GitLab CI - The pipeline that gates every change
• PHPUnit - Unit coverage

Requirements

• Drupal 10, 11 or 12
• Drupal core CKEditor 5 and Text Editor modules
• The vardot/ckeditor5-anchor-drupal plugin library (^1.0.3 || ^2.0.5), installed as a drupal-library

Quick links

• FAQ - Frequently asked questions
• Project Page - Drupal.org project page
• Issue Queue - Report bugs and request features
• Editor library - The CKEditor 5 plugin this module loads

Need help?

• Check the FAQ for common questions
• Review the documentation section that matches your role
• Search the issue queue before filing something new