Editor Advanced Link
CKEditorのリンクダイアログを拡張し、title、class、id、target、rel、aria-labelなどの追加HTML属性のサポートを提供します。
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
マーケティングリンクへのトラッキングクラスの追加
マーケティングチームは、エディタ内でリンクに特定のCSSクラス（例：'cta-button'、'campaign-summer-2024'）を直接追加でき、HTMLの知識がなくてもアナリティクストラッキングとターゲットスタイリングが可能になります。
スクリーンリーダー用のアクセシブルなリンクの作成
コンテンツ編集者は、表示されているリンクテキストとは異なる説明テキストが必要なリンクにARIAラベルを提供でき、スクリーンリーダーユーザーのアクセシビリティを向上させます。
外部リンクを新しいタブで開く
編集者は外部リンクを新しいウィンドウ/タブで開くように簡単に設定できます。モジュールはリバースタブナッピング攻撃から保護するために'noopener'セキュリティ属性を自動的に追加します。
目次用のページアンカーの作成
リンクにID属性を追加することで、編集者は長い記事内の特定のセクションにリンクする目次を可能にするアンカーポイントを作成できます。
JavaScriptギャラリーとの統合
rel属性を使用して、編集者はJavaScriptギャラリーライブラリが画像ギャラリーやモーダル表示を作成するために使用する'lightbox'やギャラリーグループ名などの関係を指定できます。
SEOリンク属性の管理
SEO担当者は、HTMLを編集することなくエディタから直接外部リンクにrel='nofollow'やrel='sponsored'属性を追加でき、検索エンジンのガイドラインに準拠できます。
Tips
- セキュリティのため、target='_blank'を使用する際はrelに'noopener'値が追加されることを常に確認してください - 両方の属性が有効な場合、モジュールがこれを自動的に処理します
- class属性を使用する場合、複数のCSSクラスをスペースで区切って指定できます
- ID属性はページ内で一意である必要があります - アクセシビリティとSEOの利点のために、意味のある説明的なIDを使用してください
- リンクダイアログをシンプルに保つため、コンテンツ編集者が実際に必要とする属性のみを有効にすることを検討してください
- title属性の値はホバー時にツールチップとして表示されます - 簡潔で有益な内容にしてください
- 最大限の互換性のために、必要になる可能性のあるすべての属性を許可するようテキストフォーマットを設定してください：<a href title class id target rel aria-label>
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format}
特定のテキストフォーマットのAdvanced links CKEditor 5プラグイン設定を構成します。このページでは、コンテンツ編集者がリンク作成時に設定できる個々のリンク属性を管理者が有効または無効にできます。
Hooks 2
hook_form_editor_link_dialog_alter
CKEditorリンクダイアログフォームを変更して追加の属性フィールドを追加します。このhookはテキストフォーマットのHTML制限に基づいて、title、class、id、target、rel、aria-labelフィールドを追加するために実装されています。
hook_form_linkit_editor_dialog_form_alter
Linkit 5.xモジュールとの互換性を提供し、Linkitのエディタダイアログフォームに同じリンクダイアログの変更を適用します。
Troubleshooting 5
以下を確認してください：1）目的の属性がテキストフォーマットのCKEditor 5プラグイン設定の「Advanced links」で有効になっている、2）テキストフォーマットの「許可されたHTMLタグを制限」フィルタが<a>要素でこれらの属性を許可している（例：<a href title class id target rel aria-label>）。
テキストフォーマットの許可されたHTMLタグに、使用しようとしている特定の属性が含まれていることを確認してください。例えば、クラスを許可するには、allowed_htmlに'<a class>'または任意のクラス値用の'<a class="*">'が含まれている必要があります。
Advancedセクションは、グループ化された属性（aria-label、class、id、target、rel）のうち少なくとも1つが有効な場合にのみ表示されます。プラグイン設定とテキストフォーマットの許可されたHTMLの両方でこれらの属性を有効にしてください。
自動noopener追加は、targetとrelの両方の属性が有効な場合にのみ機能します。テキストフォーマット設定で両方のフィールドが許可されていることを確認してください。
CKEditor 5へのアップグレード後、各テキストフォーマットでAdvanced linksプラグイン設定を再構成する必要があります。CKEditor 4の設定は自動的に移行されません。
Security Notes 4
- モジュールはtarget='_blank'がチェックされた際にrel属性に'noopener'を自動的に追加することを提案し、リバースタブナッピング攻撃から保護します
- 属性値はDrupalのテキストフォーマットフィルタリングの対象となります - テキストフォーマットのHTML制限で明示的に許可されている属性のみ使用できます
- classとid属性は許可されている場合任意の値を受け入れます - 使用できるクラスやIDを制限する必要がある場合は、追加の検証の実装を検討してください
- 高度なリンク属性が有効なフォーマットは信頼できるロールのみが使用できるよう、常にテキストフォーマットの権限を確認してください