CKEditor Anchor Link
Drupal の CKEditor 5 に拡張リンクダイアログとアンカー機能を提供し、名前付きアンカーの作成とページ内リンクを可能にします。
anchor_link
インストール
composer require 'drupal/anchor_link:^3.0'
概要
CKEditor Anchor Link モジュールは、Drupal の CKEditor 5 にリンク管理とアンカー作成機能を拡張します。アンカー（ページ内の名前付き位置）とさまざまなプロパティを持つリンクの両方を挿入・編集するための使いやすいダイアログインターフェースを提供します。
このモジュールにより、コンテンツ編集者はカスタム ID と名前を持つアンカーを作成でき、標準のアンカー構文（#anchor-name）を使用して同じページや他のページからリンクできます。これは目次、FAQ セクション、またはページ内ナビゲーションが必要な長文コンテンツの作成に特に便利です。
拡張リンクダイアログは、HTTP、HTTPS、FTP、news プロトコルなど複数の URL プロトコル、メールアドレス用の mailto リンク、電話番号用の tel リンクをサポートしています。コンテキストメニュー統合により、エディタ内から直接既存のリンクやアンカーを素早く編集・削除できます。
Features
- ページ内ナビゲーションターゲット用に id と name 属性を持つ <a> 要素を使用して名前付きアンカーを作成
- 複数の URL プロトコル（http、https、ftp、news）と特殊リンクタイプ（mailto、tel）をサポートする拡張リンクダイアログ
- エディタ内で直接リンクとアンカーを編集・削除するためのコンテキストメニュー統合
- ダブルクリック編集サポート - アンカーまたはリンクをダブルクリックすると適切なダイアログが開く
- アンカー位置を識別するための特徴的なスタイリングによるエディタ内のビジュアルアンカーインジケーター
- CKEditor 4 から CKEditor 5 への移行サポート - フォーマットアップグレード時にアンカーボタンを自動変換
- Linkit モジュール統合 - Linkit ダイアログ内でオートコンプリート候補用のアンカーリンクマッチャーを提供
- 67言語の翻訳による包括的な国際化対応
- オプションのテキストコンテンツを持つアンカーリンクまたは空のアンカー（ビジュアルプレースホルダー）のサポート
- アンカー関連の属性を GHS 制御から明示的に除外することで General HTML Support（GHS）との競合を防止
Use Cases
ジャンプリンク付き目次
コンテンツ編集者は以下の手順で長い記事の先頭に目次を作成できます: 1) Anchor ボタンを使用して各セクション見出しにアンカーポイントを配置、2) #anchor-name 形式を使用してこれらのアンカーを指すリンクのリストを先頭に作成。読者はリンクをクリックして特定のセクションに直接ジャンプできます。
クイックナビゲーション付き FAQ ページ
各質問にアンカーを持つ FAQ ページを構築し、以下を可能にします: 1) 他のページから特定の質問への直接リンク（例: /faq#return-policy）、2) FAQ ページ上部のクイックナビゲーションメニュー、3) 各回答後にトップアンカーを指す「トップに戻る」リンク。
クロスページディープリンク
あるページから別のページの特定のセクションへのリンクを作成します。例えば、製品ページから利用規約の関連セクションへ、アンカー付きの完全な URL（例: /terms#warranty-section）を使用して直接リンクします。
シングルページアプリケーションナビゲーション
ランディングページや1ページウェブサイト向けに、各コンテンツセクションにアンカーを配置し、各アンカーへのリンクを持つ固定ナビゲーションメニューを使用して、スムーズなセクションベースのナビゲーションを作成します。
Tips
- SEO と保守性向上のため、説明的で URL フレンドリーなアンカー名を使用してください（例: 'section1' ではなく 'section-pricing'）
- アンカー名は最大限のブラウザ互換性のために <a> 要素の 'id' と 'name' 属性の両方になります
- CKEditor で既存のアンカーまたはリンクをダブルクリックすると素早く編集できます
- リンクまたはアンカーを右クリックすると、編集や削除のコンテキストメニューオプションにアクセスできます
- Linkit モジュールと併用する場合、リンクダイアログでアンカー名を検索してオートコンプリート候補を取得できます
- キーボードショートカット Ctrl+L または Ctrl+K でリンクダイアログを開き、素早くリンクを挿入できます
- セクションへのジャンプ時のユーザー体験向上のため、アンカーターゲットを視覚的にスタイリングする CSS の追加を検討してください（:target 疑似クラスを使用）
Technical Details
Hooks 2
hook_help
hook_help() を実装し、モジュールのヘルプページにヘルプテキストを提供します。リンクとアンカーを挿入するためのモジュールの機能を説明します。
hook_ckeditor5_plugin_info_alter
CKEditor 5 プラグイン定義を変更し、General HTML Support（GHS）プラグインがアンカー固有の属性（id、name）と ck-anchor クラスを制御するのを防ぎ、アンカープラグインがこれらの要素の制御を維持できるようにします。
Troubleshooting 5
テキストフォーマットの「許可される HTML タグを制限」フィルターに <a> 要素の 'name' 属性が含まれていることを確認してください。許可 HTML を <a name href hreflang target rel> を含むように設定してください。
外部ライブラリが /libraries/ckeditor5-anchor-drupal/ に正しくインストールされていることを確認してください。モジュールが有効化され、テキストフォーマット設定でツールバーに Anchor ボタンが含まれるように設定されていることを確認してください。
wikimedia/composer-merge-plugin がインストールされ、composer.json の extra セクションでモジュールの composer.libraries.json を含むように適切に設定されていることを確認してください。merge plugin が新しいライブラリ要件を認識するために composer update を2回実行する必要がある場合があります。
モジュールには自動移行サポートが含まれています。テキストフォーマットのアップグレードプロセスを再度実行するか、移行後に CKEditor 5 設定に 'anchor' ツールバーアイテムを手動で追加してください。
これは空のアンカーの想定された動作です。CKEditor は選択と編集を容易にするために空のアンカーをフェイク画像要素に変換します。実際の HTML 出力には適切な <a name="..."> 要素が含まれます。
Security Notes 3
- モジュールはテキストフォーマットフィルタリングを尊重します - 許可 HTML タグ設定が適切に制限されていることを確認してください
- JavaScript プロトコルリンク（javascript:）はセキュリティのためリンクダイアログでデフォルトでブロックされます
- モジュールは General HTML Support がアンカー属性処理を上書きするのを防ぎ、一貫したセキュリティ動作を維持します