CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/Features

Multi-level lists

Multi-level lists with the legal style numbering feature allows for easy creation and modification of numbered lists with counters (1, 1.1, 1.1.1). These are crucial for clear referencing and hierarchical organization in complex documents. The feature offers full compatibility with Microsoft Word. When lists with such formatting are pasted to the editor with the paste from Office enhanced feature, the numbering format is retained.

This is a premium feature and you need a license for it on top of your CKEditor 5 commercial license. Contact us to receive an offer tailored to your needs.

You can also sign up for the CKEditor Premium Features 30-day free trial to test the feature.

# Demo

List of human spacecraft

  1. 1. American spacecraft

    1. 1.1. Manned

      1. 1.1.1. Mercury
      2. 1.1.2. Gemini
      3. 1.1.3. Apollo
      4. 1.1.4. space shuttle
        1. 1.1.4.1. Columbia
        2. 1.1.4.2. Challenger
        3. 1.1.4.3. Discovery
        4. 1.1.4.4. Atlantis
        5. 1.1.4.5. Endeavour
      5. 1.1.5. Dragon
      6. 1.1.6. New Sheppard

    2. 1.2. Cargo

      1. 1.2.1. Dragon
      2. 1.2.2. Cygnus

  2. 2. Soviet (and Russian) spacecraft

    1. 2.1. Manned

      1. 2.1.1. Vostok
      2. 2.1.2. Voskhod
      3. 2.1.3. Soyuz
        1. 2.1.3.1. 7K-OK
        2. 2.1.3.2. 7K-T
        3. 2.1.3.3. Soyuz T
        4. 2.1.3.4. Soyuz TM
        5. 2.1.3.5. Soyuz TMA
        6. 2.1.3.6. Soyuz MS

    2. 2.2. Cargo

      1. 2.2.1. Progress
        1. 2.2.1.1. Progress
        2. 2.2.1.2. Progress M

  3. 3. Chinese spacecraft

    1. 3.1. Manned

      1. 3.1.1. Shenzhou

    2. 3.2. Cargo

      1. 3.2.1. Tianzhou

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Additional feature information

# Headings in multi-level lists

Multi-level lists support headings in list items. The marker, which denotes the counter, will insert itself into the heading block to achieve more similar styles.

While creation of a legal document with a list of numbered headings is possible, the editing of long-form documents may not be the best experience. You might want full support for the numbered headings feature that Microsoft Word places in the multi-level lists interface. We do not have it yet, but if you are interested, please let us know in this GitHub issue or via our support.

# Custom multi-level list styles

For now, we provide one style for multi-level lists: legal style numbering. But this first step opens a possibility for us to add more styles in the future or allow integrators to create their own styles. If you are interested, please let us know in this GitHub issue or via our support.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

Please note that this plugin requires the basic List plugin to work properly.

After installing the editor, add the features to your plugin list and toolbar configuration:

import { List } from 'ckeditor5';
import { MultiLevelList } from 'ckeditor5-premium-features';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ List, MultiLevelList, /* ... */ ],
        toolbar: [ 'multiLevelList', /* ... */ ],
        licenseKey: '<YOUR_LICENSE_KEY>' // provide proper authentication (see below)
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

Read more about installing plugins and toolbar configuration.

# Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the License key and activation guide for details.

# Common API

The MultiLevelList registers:

  • The 'multiLevelList' UI dropdown component.
  • The 'multiLevelList' command implemented by MultiLevelListCommand.

You can execute the command using the editor.execute() method:

// Change selected content to multi level list.
editor.execute( 'multiLevelList' );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.