CKEditor Contextual adds a configurable contextual (balloon) toolbar to CKEditor 5. When a user selects text, a small toolbar appears next to the selection with the buttons you choose - a fast, in-context way to apply formatting without moving to the main toolbar. The button set is configured per text format using the same drag-and-drop builder as the main CKEditor 5 toolbar, so it needs no code.

Key features

Contextual balloon toolbar: pops up at the current text selection and hides again when the selection collapses or the editor loses focus.
Per-format drag-and-drop builder: choose the balloon's buttons in the text format's Contextual tools settings tab, using the same familiar toolbar-builder UI as the main toolbar.
Only offers what works: the builder lists only buttons whose plugins are enabled for that format (in practice, the buttons loaded by the main toolbar), and the list tracks the main toolbar as you edit it - so a button you add always actually appears.
Real editor buttons: the balloon reuses the editor's own components (bold, italic, link, and so on), so they stay in sync with the selection - active states, dropdowns and all.
One-click enable and toggle: dragging the Contextual tools button into the main toolbar enables the feature and reveals its settings tab; the same button toggles the balloon on or off while editing.

Screenshots

Configuration

Enable CKEditor Contextual module.
Edit a CKEditor 5 text format at Administration » Configuration » Content authoring » Text formats and editors.
Drag the Contextual tools button into the active toolbar to enable the feature and reveal its settings tab.
Open the Contextual tools tab and drag the buttons you want into the Active contextual toolbar.
Save.

Usage

Select some text in the editor - the contextual toolbar appears at the selection.
Click a button to apply it to the selection, just like the main toolbar.
Use the Contextual tools toolbar button to turn the balloon on or off while editing.

Developer API

The in-editor plugin is a standard CKEditor 5 plugin named ContextTools with a small public coordination API so other plugins can avoid stacking balloons on the same selection:

suppressWhileVisible(observable, property = 'balloonVisible') - register your balloon's visibility observable to keep the contextual balloon hidden while yours is showing. It listens for changes and is safe to call regardless of plugin load order.
balloonVisible observable - read it, or subscribe to change:balloonVisible, to hide your balloon while the contextual toolbar is up instead.

The module holds no code specific to any other module; the two points compose for two-way coordination. See the module README for examples.

Requirements

Drupal 10.6+, 11.3+ or 12.
Drupal core CKEditor 5 and Editor modules. No other dependencies.

Built with AI assistance

CKEditor Contextual