CKEditor Taxonomy Glossary

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

1. In CKEditor 5, highlight the text you want to link to a glossary term
2. Click the "Glossary Link" button in the toolbar (or use the keyboard shortcut)
3. Start typing to search for glossary terms
4. 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
5. 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

1. Tooltips not appearing: Clear Drupal caches and ensure JavaScript aggregation is working
2. CKEditor button missing: Check text format configuration and permissions
3. Terms not found: Ensure terms exist in the Glossary vocabulary

Similar modules but different

• Onomasticon
• CKEditor Glossary
• Term Glossary
• Glossify