The CKEditor Styles overview page, showing a table of existing styles, their properties, and a button to add more.
The form for adding or editing a style. There are fields for label, HTML element, and CSS classes.

This module allows specifying what styles are available in the CKEditor "Styles" dropdown selection using configuration entities. Site builders can add, edit, and delete individual styles. Because each style is a config entity, themes can provide their own default styles as well.

While Drupal core already provides an interface for managing these styles, it's embedded in the CKEditor configuration form. Using this module allows you users to manage the styles separately from the entire CKEditor and text format configuration.

This module also does something that core doesn't: It will dynamically add the specific CSS classes you define for your styles to the allowed HTML filter.

Usage

  1. Enable the module
  2. Edit one of your formats that uses CKEditor and make sure the "Styles" button is added to the toolbar
  3. Configure styles available via /admin/config/content/ckeditor-standalone-styles

Note that any styles you define from the main editor configuration page will be ignored.

Version Info

The 2.0.x version of this module is compatible with Drupal 9 and 10. For Drupal 10, it requires using the contrib CKEditor 4 module. It does not yet work with the CKEditor 5 module provided by Drupal 10 core.

Supporting organizations: 
maintenance & contributions

Project information

Releases