CKEditor List Style

Description

This plugin adds numbered list and ordered list properties dialogs (available in context menu).

They allow setting:

• list type (e.g. circle, square, dot for bulleted list or decimal, lower/upper roman, lower/upper alpha for numbered list)
• start number (for numbered list).

Known issue

This plugin works only with the text formats supporting full HTML.

Any text format with Limit allowed HTML tags and correct faulty HTML filter enabled will strip the style attribute from ANY tags. See FilterHtml class:

The 'style' and 'on*' ('onClick' etc.) attributes are always forbidden, and are removed by Xss::filter()

However, the CKEditor 4 List Style plugin sets the list properties via inline styles.

See #2850288-12: CKEditor will not load in Basic and Restricted formats

Usage

Right click on any numbered or ordered list in CKEditor to open the context menu.

Installation

This module requires:

• List Style plugin: A CKEditor 4 plugin that adds numbered list and ordered list properties dialogs (available in context menu).

Install using Composer (recommended)

Edit your composer.json file, and add the repository, installer type, and installer path references from following.

Make sure the installer path matches to your site's paths.

{
  "repositories": {
    "ckeditor.liststyle": {
      "type": "package",
      "package": {
        "name": "ckeditor/liststyle",
        "version": "4.17.1",
        "type": "ckeditor-plugin",
        "dist": {
          "url": "https://download.ckeditor.com/liststyle/releases/liststyle_4.17.1.zip",
          "type": "zip"
        }
      }
    }
  },
  "extra": {
    "installer-types": ["ckeditor-plugin"],
    "installer-paths": {
      "web/libraries/ckeditor/plugins/{$name}": ["type:ckeditor-plugin"]
    }
  }
}

Run composer update --lock to generate an updated composer.lock file.

Make sure you already have these packages installed:

• composer/installers
• oomphinc/composer-installers-extender

Install the CKEditor List Style plugin, and this module:

composer require ckeditor/liststyle drupal/ckeditor_liststyle

Install manually

• Download the List Style plugin; extract the content, and copy to libraries folder. i.e. /libraries/liststyle/plugin.js
• Download CKEditor List Style (this module) and then extract files to /modules/contrib/ckeditor_liststyle

Resources

Other contributed modules and plug-ins available for CKEditor

Drupal 11

TL;DR; Drupal 11 & CKEditor 5 supports the custom list styles out of the box, and you won't need this module.

If you are already on Drupal ^9.4 or ^10, you are using the CKEditor 4 via the contribute module. The module is obsolete, and is not supported by Drupal 11.

On the upside, an upgrade path is available; follow these high-level steps:

1. Change the text editor from CKEditor to CKEditor 5 in the text formats and editors
2. Uninstall the CKEditor List Style module, the ckeditor/liststyle package, and related references from the composer.json file.
3. Uninstall the CKEditor 4 (contrib) (Deprecated) module.
4. Upgrade to Drupal 11

As long as no content is edited until these steps are completed, the custom list styles should be preserved. But make sure to test and confirm this on a non-production environment first.