There is currently active work going on in the CKEditor Anchor links module on Drupal.org. Here is a short tutorial on how I got it working in Drupal 10:
Step 1: download the Anchor link module
This is an easy one, just download the module like you normally do. Use the dev-3.0 version:
composer require drupal/anchor_link:dev-3.0.x
Step 2: install a patch
Make sure you have the cweagans/composer-patches add-on for composer installed first. Download this patch and store it in
"extra": {
"drupal-scaffold": {
"locations": {
"web-root": "web/"
}
},
"patches": {
"drupal/anchor_link": {
"Anchor link fix": "patches/ckeditor5_anchorlinks.patch"
}
},
"installer-paths": {
"web/core": ["type:drupal-core"],
// ...
},
}
(read further under the tweet)
Never include direct MR links as Composer patches. Since it always uses the last state of the MR and since anyone with a https://t.co/nXbiJeiuHb account can push to issue branches, it allows anyone to inject code into your project during deploys. Store the patch locally instead.
— Dieter Holvoet (@DieterHolvoet) September 5, 2023
Now run
composer install
This will patch the module to get it to work for CKEditor 5.
Step 3: add the CKEditor 5 anchor package for Drupal as a package
In the "repositories"-section of your composer.json file, add the following package:
{
"type": "package",
"package": {
"name": "northernco/ckeditor5-anchor-drupal",
"version": "0.2.0.",
"type": "drupal-library",
"dist": {
"url": "https://registry.npmjs.org/@northernco/ckeditor5-anchor-drupal/-/ckeditor5-anchor-drupal-0.2.0.tgz",
"type": "tar"
}
}
},
Now, require the package:
composer require northernco/ckeditor5-anchor-drupal
This will download the github package in put in in your libraries folder.
Here is a full example of a composer.json in case you are having trouble putting the sections in the right place:
{
"name": "drupal/recommended-project",
"description": "Project template for Drupal projects with a relocated document root",
"type": "project",
"license": "GPL-2.0-or-later",
"homepage": "https://www.drupal.org/project/drupal",
"support": {
"docs": "https://www.drupal.org/docs/user_guide/en/index.html",
"chat": "https://www.drupal.org/node/314178"
},
"repositories": [
{
"type": "composer",
"url": "https://packages.drupal.org/8"
},
{
"type": "package",
"package": {
"name": "northernco/ckeditor5-anchor-drupal",
"version": "0.2.0.",
"type": "drupal-library",
"dist": {
"url": "https://registry.npmjs.org/@northernco/ckeditor5-anchor-drupal/-/ckeditor5-anchor-drupal-0.2.0.tgz",
"type": "tar"
}
}
},
],
"require": {
"composer/installers": "^2.0",
"cweagans/composer-patches": "^1.7",
"drupal/anchor_link": "dev-3.0.x",
"drupal/core-composer-scaffold": "^10.0.0",
"drupal/core-project-message": "^10.0.0",
"drupal/core-recommended": "^10.0.0",
"drush/drush": "^11.4",
},
"require-dev": {
"drupal/core-dev": "^10.0"
},
"conflict": {
"drupal/drupal": "*"
},
"minimum-stability": "dev",
"prefer-stable": true,
"config": {
"preferred-install": {
"vito/vito_cookie": "source",
"*": "dist"
},
"platform": {
"php": "8.1"
},
"allow-plugins": {
"composer/installers": true,
"drupal/core-composer-scaffold": true,
"drupal/core-project-message": true,
"phpstan/extension-installer": true,
"dealerdirect/phpcodesniffer-composer-installer": true,
"cweagans/composer-patches": true,
"zaporylie/composer-drupal-optimizations": true
},
"sort-packages": true
},
"extra": {
"drupal-scaffold": {
"locations": {
"web-root": "web/"
}
},
"patches": {
"drupal/anchor_link": {
"Anchor link fix": "patches/ckeditor5_anchorlinks.patch"
}
},
"installer-paths": {
"web/core": ["type:drupal-core"],
"web/libraries/{$name}": ["type:drupal-library","type:bower-asset", "type:npm-asset"],
"web/modules/contrib/{$name}": ["type:drupal-module"],
"web/profiles/contrib/{$name}": ["type:drupal-profile"],
"web/themes/contrib/{$name}": ["type:drupal-theme"],
"drush/Commands/contrib/{$name}": ["type:drupal-drush"],
"web/modules/custom/{$name}": ["type:drupal-custom-module"],
"web/profiles/custom/{$name}": ["type:drupal-custom-profile"],
"web/themes/custom/{$name}": ["type:drupal-custom-theme"]
},
"installer-types": ["bower-asset", "npm-asset"],
"drupal-core-project-message": {
"include-keys": ["homepage", "support"],
"post-create-project-cmd-message": [
"<bg=blue;fg=white> </>",
"<bg=blue;fg=white> Congratulations, you’ve installed the Drupal codebase </>",
"<bg=blue;fg=white> from the drupal/recommended-project template! </>",
"<bg=blue;fg=white> </>"
]
}
}
}
Step 4: Install the module and add anchor links to the toolbar
drush en anchor_link
Now got to your text editor settings page, for me this is /admin/config/content/formats/manage/basic_html.
Now drag the flag icon (anchor) to the active toolbar, if necessary.
Step 5: enjoy
I have now saved you some headaches! Big thanks to all the contributors.
Saved you some valuable time?
Buy me a drink 🍺 to keep me motivated to create free content like this!
