CKEditor Anchor Link
Provides enhanced link dialog and anchor functionality for CKEditor 5 in Drupal, allowing users to create named anchors and link to them within pages.
anchor_link
Install
composer require 'drupal/anchor_link:^3.0'
Overview
The CKEditor Anchor Link module extends CKEditor 5 in Drupal with improved link management and anchor creation capabilities. It provides a user-friendly dialog interface for inserting and editing both anchors (named locations within a page) and links with various properties.
The module enables content editors to create anchors with custom IDs and names, which can then be linked to from anywhere on the same page or other pages using the standard anchor syntax (#anchor-name). This is particularly useful for creating table of contents, FAQ sections, or any long-form content where in-page navigation is needed.
The enhanced link dialog supports multiple URL protocols including HTTP, HTTPS, FTP, and news protocols, as well as mailto links for email addresses and tel links for phone numbers. Context menu integration allows quick editing or removal of existing links and anchors directly from the editor.
Features
- Creates named anchors using <a> elements with id and name attributes for in-page navigation targets
- Enhanced link dialog supporting multiple URL protocols (http, https, ftp, news) and special link types (mailto, tel)
- Context menu integration for editing and removing links and anchors directly within the editor
- Double-click editing support - double-clicking an anchor or link opens the appropriate dialog
- Visual anchor indicators in the editor with distinctive styling to identify anchor positions
- CKEditor 4 to CKEditor 5 migration support - automatically converts anchor buttons during format upgrades
- Linkit module integration - provides anchor link matcher for autocomplete suggestions within the Linkit dialog
- Comprehensive internationalization with translations for 67 languages
- Support for anchor links with optional text content or empty anchors (visual placeholders)
- Prevents General HTML Support (GHS) conflicts by explicitly disallowing anchor-related attributes from GHS control
Use Cases
Table of Contents with Jump Links
Content editors can create a table of contents at the top of long articles by: 1) Placing anchor points at each section heading using the Anchor button, 2) Creating a list of links at the top that point to these anchors using #anchor-name format. Readers can then click links to jump directly to specific sections.
FAQ Page with Quick Navigation
Build an FAQ page where each question has an anchor, allowing: 1) Direct linking from other pages to specific questions (e.g., /faq#return-policy), 2) A quick navigation menu at the top of the FAQ page, 3) 'Back to top' links after each answer pointing to a top anchor.
Cross-Page Deep Linking
Create links from one page to a specific section of another page. For example, linking from a product page directly to the relevant section of terms and conditions using the full URL with anchor (e.g., /terms#warranty-section).
Single Page Application Navigation
For landing pages or one-page websites, create smooth section-based navigation using anchors at each content section and a sticky navigation menu with links to each anchor.
Tips
- Use descriptive, URL-friendly anchor names (e.g., 'section-pricing' rather than 'section1') for better SEO and maintainability
- The anchor name becomes both the 'id' and 'name' attribute of the <a> element for maximum browser compatibility
- Double-click on an existing anchor or link in CKEditor to quickly edit it
- Right-click on links or anchors to access context menu options for editing or removal
- When using with Linkit module, you can search for anchor names in the link dialog for autocomplete suggestions
- Keyboard shortcuts Ctrl+L or Ctrl+K open the link dialog for quick link insertion
- Consider adding CSS to visually style anchor targets (using :target pseudo-class) for better user experience when jumping to sections
Technical Details
Hooks 2
hook_help
Implements hook_help() to provide help text on the module's help page, describing the module's functionality for inserting links and anchors.
hook_ckeditor5_plugin_info_alter
Alters CKEditor 5 plugin definitions to prevent the General HTML Support (GHS) plugin from controlling anchor-specific attributes (id, name) and the ck-anchor class, ensuring the anchor plugin maintains control over these elements.
Troubleshooting 5
Ensure your text format's 'Limit allowed HTML tags' filter includes the 'name' attribute on <a> elements. Configure allowed HTML to include: <a name href hreflang target rel>
Verify the external library is installed correctly in /libraries/ckeditor5-anchor-drupal/. Check that the module is enabled and the toolbar is configured to include the Anchor button in your text format settings.
Ensure wikimedia/composer-merge-plugin is installed and properly configured in your composer.json extra section to include the module's composer.libraries.json. You may need to run composer update twice for the merge plugin to recognize the new library requirement.
The module includes automatic migration support. Run the text format upgrade process again, or manually add the 'anchor' toolbar item to your CKEditor 5 configuration after migration.
This is expected behavior for empty anchors. CKEditor converts empty anchors to fake image elements for easier selection and editing. The actual HTML output will contain proper <a name="..."> elements.
Security Notes 3
- The module respects text format filtering - ensure your allowed HTML tags configuration is appropriately restrictive
- JavaScript protocol links (javascript:) are blocked by default in the link dialog for security
- The module prevents General HTML Support from overriding anchor attribute handling, maintaining consistent security behavior