Editor Advanced Link
Enhances the CKEditor link dialog by adding support for additional HTML attributes such as title, class, id, target, rel, and aria-label.
editor_advanced_link
Install
composer require 'drupal/editor_advanced_link:^2.3'
Overview
Editor Advanced Link extends the default link dialog in CKEditor (both CKEditor 4 and CKEditor 5) to allow content editors to set additional HTML attributes on anchor (<a>) elements. This enables more sophisticated link configurations directly from the WYSIWYG editor without requiring manual HTML editing.
The module intelligently integrates with Drupal's text format system, only displaying attribute fields that are explicitly allowed by the text format's HTML restrictions. This ensures security compliance while providing flexibility for content creators who need advanced link attributes.
For CKEditor 5, the module provides a dedicated plugin that adds form fields to the link balloon interface, with advanced options grouped in a collapsible section for a cleaner user experience. The module also includes accessibility features such as automatic addition of noopener to the rel attribute when opening links in new windows.
Features
- Adds title attribute field to link dialog - enables tooltip text that appears when users hover over links
- Adds CSS classes field - allows applying custom styling classes to individual links
- Adds ID attribute field - enables fragment identifiers for deep linking to specific content sections
- Adds target attribute checkbox - provides option to open links in new window/tab (target="_blank")
- Adds rel attribute field - supports relationship attributes like noopener, nofollow, or custom values for JavaScript galleries
- Adds ARIA label field - enables accessible alternative text for screen readers
- Automatic noopener security - automatically adds noopener to rel attribute when target="_blank" is selected
- Text format integration - only shows fields for attributes allowed by the text format's HTML restrictions
- CKEditor 5 native support - provides a dedicated CKEditor 5 plugin with balloon UI integration
- Linkit module compatibility - works with Linkit 5.x module's link dialog form
- CKEditor 4 to 5 migration support - includes upgrade path plugin for migrating from CKEditor 4 (deprecated)
- Collapsible Advanced section - groups less common attributes in a collapsible section for cleaner UI
Use Cases
Adding tracking classes to marketing links
Marketing teams can add specific CSS classes to links (e.g., 'cta-button', 'campaign-summer-2024') directly in the editor, enabling analytics tracking and targeted styling without HTML knowledge.
Creating accessible links for screen readers
Content editors can provide ARIA labels for links that need descriptive text different from the visible link text, improving accessibility for users with screen readers.
Opening external links in new tabs
Editors can easily set external links to open in new windows/tabs. The module automatically adds the 'noopener' security attribute to protect against reverse tabnapping attacks.
Creating page anchors for table of contents
By adding ID attributes to links, editors can create anchor points that enable a table of contents to link to specific sections within long articles.
JavaScript gallery integration
Using the rel attribute, editors can specify relationships like 'lightbox' or gallery group names that JavaScript gallery libraries use to create image galleries and modal displays.
SEO link attribute management
SEO specialists can add rel='nofollow' or rel='sponsored' attributes to outbound links directly from the editor, complying with search engine guidelines without editing HTML.
Tips
- For security, always ensure the 'noopener' value is added to rel when using target='_blank' - the module handles this automatically when both attributes are enabled
- When using the class attribute, you can specify multiple CSS classes separated by spaces
- The ID attribute must be unique within a page - use meaningful, descriptive IDs for accessibility and SEO benefits
- Consider enabling only the attributes your content editors actually need to keep the link dialog simple
- The title attribute value appears as a tooltip on hover - keep it concise but informative
- For maximum compatibility, configure your text format to allow all attributes you might need: <a href title class id target rel aria-label>
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format}
Configure the Advanced links CKEditor 5 plugin settings for a specific text format. This page allows administrators to enable or disable individual link attributes that content editors can set when creating links.
Hooks 2
hook_form_editor_link_dialog_alter
Alters the CKEditor link dialog form to add additional attribute fields. This hook is implemented to add title, class, id, target, rel, and aria-label fields based on text format HTML restrictions.
hook_form_linkit_editor_dialog_form_alter
Provides Linkit 5.x module compatibility by applying the same link dialog alterations to Linkit's editor dialog form.
Troubleshooting 5
Ensure that: 1) The desired attributes are enabled in the text format's CKEditor 5 plugin settings under 'Advanced links', 2) The text format's 'Limit allowed HTML tags' filter allows these attributes on the <a> element (e.g., <a href title class id target rel aria-label>).
Check that the text format's allowed HTML tags include the specific attributes you're trying to use. For example, to allow classes, the allowed_html must include '<a class>' or '<a class="*">' for any class value.
The Advanced section only appears when at least one of its grouped attributes (aria-label, class, id, target, rel) is enabled. Enable these attributes in both the plugin settings and the text format's allowed HTML.
The automatic noopener addition only works when both the target and rel attributes are enabled. Ensure both fields are allowed in the text format configuration.
After upgrading to CKEditor 5, you need to reconfigure the Advanced links plugin settings in each text format. The CKEditor 4 settings are not automatically migrated.
Security Notes 4
- The module automatically suggests adding 'noopener' to the rel attribute when target='_blank' is checked, protecting against reverse tabnapping attacks
- Attribute values are subject to Drupal's text format filtering - only attributes explicitly allowed in the text format's HTML restrictions can be used
- The class and id attributes accept any value if allowed - consider implementing additional validation if you need to restrict which classes or IDs can be used
- Always review text format permissions to ensure only trusted roles can use formats with advanced link attributes enabled