CKEditor ID Attributes
This module adds a toolbar button to CKEditor 5, allowing users to easily add ID attributes to elements without needing to edit the HTML source. Simply select an element, click the button, and enter the desired ID.
If you ever tried to add ID attributes (for example for anchor links) in CKEditor5 and realized you'll have to edit the HTML in source editing mode to do that, this module is for you.
Features
This module provides a new toolbar button that will open up a textfield which you can enter your ID attribute in. So in order to add an ID attribute to an element in your CKEditor content, simply move the pointer to the element or select it then click the button and enter the ID. And voilà your element will get an ID attribute.
What this module doesn't do yet:
- There is no checking if the ID you enter/add to an element is unique
- ID attributes can't be added to some elements with nested elements. For example if you move the pointer to a list item (
<li>) element but you want to apply the ID to the<ul>, the ID is added to the - element currently.
Post-Installation
In order touse the new ID attributes toolbar button, follow these steps after adding it as usual via composer:
- Enable the module via the UI or via Drush.
- Head to /admin/config/content/formats, select the text format you want to enable the ID attributes button in and edit the format.
- On the text format edit form, find the ID attributes toolbar button and add it to the toolbar, save the textformat./li>
- Edit or create a content with a field using that textformat and you can now use the ID attributes button