CKEditor Taxonomy Glossary
This module adds a glossary feature to CKEditor 5, allowing content editors to link text to predefined glossary terms. When users hover over or click these links on the frontend, a tooltip will appear displaying the definition of the term.
The CKEditor Taxonomy Glossary module provides a glossary button for CKEditor 5 integration with your taxonomy terms. It allows content editors to link words to glossary terms, which display tooltips on the frontend when users hover over or click on them.
Features
- Custom "Glossary" vocabulary for managing glossary terms
- CKEditor 5 plugin for linking text to glossary terms
- Autocomplete functionality for finding glossary terms while editing
- On-the-fly term creation directly from the CKEditor interface
- Multilingual support with language indicators in autocomplete
- Language-specific API endpoints for better translation support
- Frontend tooltips that display term descriptions
- Fully cached and performant implementation
- Accessibility-compliant tooltips with keyboard navigation
Configuration
Text Format Configuration
1. Navigate to Configuration > Content authoring > Text formats and editors
2. Edit your desired text format (e.g., "Full HTML" or "Basic HTML")
3. Under "Enabled filters", enable "Glossary link filter"
4. Under "CKEditor 5 plugin settings", drag the "Glossary Link" button to your toolbar
5. Save the configuration
Permissions
Grant the following permissions to appropriate roles:
- Administer glossary terms: Allows managing glossary vocabulary and terms
- Link to glossary terms: Allows using the CKEditor plugin to link to glossary terms
Managing Glossary Terms
1. Navigate to Structure > Taxonomy > Glossary
2. Add new terms with:
- Name: The term to be defined
- Description: The definition that appears in the tooltip
Usage
For Content Editors
- In CKEditor 5, highlight the text you want to link to a glossary term
- Click the "Glossary Link" button in the toolbar (or use the keyboard shortcut)
- Start typing to search for glossary terms
- Select the desired term from the autocomplete results, or Click "Create New Term" if the term doesn't exist to fill the name and description
- The text will be linked with a special glossary link
Theming
The module provides default CSS for tooltips. You can override the styles by targeting:
.glossary-link {
/* Styles for glossary links */
}
.glossary-tooltip {
/* Styles for tooltip container */
}
API Routes
- /glossary/autocomplete/{text}: Returns JSON array of matching glossary terms
- /glossary/autocomplete/{text}/{langcode}: Returns JSON array of matching glossary terms for specific language
- /glossary/description/{tid}: Returns JSON with term description
- /glossary/description/{tid}/{langcode}: Returns JSON with term description for specific language
- /glossary/term/{tid}: Returns JSON with basic term information
Multilingual Support
All API responses include language information:
- langcode: The language code of the term (e.g.,
en,es) - language_name: The human-readable language name
The autocomplete interface displays language codes as badges (e.g., [EN]) next to term names to help editors identify the language of each term.
Hooks
hook_ckeditor_taxonomy_glossary_tooltip_alter(&$tooltip, $term): Alter tooltip content before display
Troubleshooting
- Tooltips not appearing: Clear Drupal caches and ensure JavaScript aggregation is working
- CKEditor button missing: Check text format configuration and permissions
- Terms not found: Ensure terms exist in the Glossary vocabulary
Similar modules but different