Installation

List functionality in CKEditor 5 is provided by several plugins. This article explains how to install them.

# Ordered and unordered lists installation

The List plugin provides the ordered (numbered) and unordered (bulleted) features for CKEditor 5. Additional list properties, such as list marker styles, start index, or reversed list order, are provided by the ListProperties plugin.

# List feature

To add this feature to your editor, install the @ckeditor/ckeditor5-list package:

npm install --save @ckeditor/ckeditor5-list

Then add the List plugin to your plugin list and the toolbar configuration:

import { List } from '@ckeditor/ckeditor5-list';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ List, /* ... */ ],
        toolbar: [ 'bulletedList', 'numberedList', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# List properties

To enable the list properties feature for ordered and unordered lists, install the @ckeditor/ckeditor5-list package:

npm install --save @ckeditor/ckeditor5-list

Then add the ListProperties plugin to your plugin list and configure the toolbar.

To enable selected sub-features of the list properties, add their configuration to your editor. Set true for each feature you want to enable:

import { ListProperties } from '@ckeditor/ckeditor5-list';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ListProperties, /* ... */ ],
        toolbar: [ 'bulletedList', 'numberedList', /* ... */ ],
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# To-do lists installation

The TodoList plugin provides the to-do list feature for CKEditor 5.

To add this feature to your editor, install the @ckeditor/ckeditor5-list package:

npm install --save @ckeditor/ckeditor5-list

Then add the TodoList plugin to your plugin list and the toolbar configuration:

import { TodoList } from '@ckeditor/ckeditor5-list';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ TodoList, /* ... */ ],
        toolbar: [ 'todoList', /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );