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
32,670 sites
52
drupal.org
utility integration
ckeditor ckeditor5 WYSIWYG editor anchor link navigation content editing text format
Drupal 9 Drupal 10 Drupal 11

インストール

Drupal 11, 10, 9 v3.0.3
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

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
Anchors are being stripped from content when saved

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>

Anchor button not appearing in CKEditor 5 toolbar

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.

External library not downloading via Composer

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.

CKEditor 4 to 5 migration loses anchor buttons

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.

Anchors appear as images/placeholders in the editor

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