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
インストール
composer require 'drupal/editor_advanced_link:^2.3'
概要
Editor Advanced Linkは、CKEditor（CKEditor 4とCKEditor 5の両方）のデフォルトリンクダイアログを拡張し、コンテンツ編集者がアンカー（<a>）要素に追加のHTML属性を設定できるようにします。これにより、手動でHTMLを編集することなく、WYSIWYGエディタから直接より高度なリンク設定が可能になります。
このモジュールはDrupalのテキストフォーマットシステムとインテリジェントに統合され、テキストフォーマットのHTML制限で明示的に許可されている属性フィールドのみを表示します。これにより、高度なリンク属性を必要とするコンテンツ作成者に柔軟性を提供しながら、セキュリティコンプライアンスを確保します。
CKEditor 5では、リンクバルーンインターフェースにフォームフィールドを追加する専用プラグインを提供し、高度なオプションは折りたたみ可能なセクションにグループ化されてよりクリーンなユーザー体験を実現します。また、新しいウィンドウでリンクを開く際にrel属性にnoopenerを自動追加するなど、アクセシビリティ機能も含まれています。
Features
- リンクダイアログにtitle属性フィールドを追加 - ユーザーがリンクにホバーした際に表示されるツールチップテキストを設定可能
- CSSクラスフィールドを追加 - 個々のリンクにカスタムスタイリングクラスを適用可能
- ID属性フィールドを追加 - 特定のコンテンツセクションへのディープリンク用のフラグメント識別子を設定可能
- target属性チェックボックスを追加 - リンクを新しいウィンドウ/タブで開くオプション（target="_blank"）を提供
- rel属性フィールドを追加 - noopener、nofollowなどの関係属性やJavaScriptギャラリー用のカスタム値をサポート
- ARIAラベルフィールドを追加 - スクリーンリーダー用のアクセシブルな代替テキストを設定可能
- 自動noopenerセキュリティ - target="_blank"が選択された際にrel属性にnoopenerを自動追加
- テキストフォーマット統合 - テキストフォーマットのHTML制限で許可されている属性のフィールドのみを表示
- CKEditor 5ネイティブサポート - バルーンUI統合を備えた専用CKEditor 5プラグインを提供
- Linkitモジュール互換性 - Linkit 5.xモジュールのリンクダイアログフォームと連携
- CKEditor 4から5への移行サポート - CKEditor 4からの移行用アップグレードパスプラグインを含む（非推奨）
- 折りたたみ可能なAdvancedセクション - 使用頻度の低い属性をよりクリーンな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