The {@link module:list/list~List list} feature allows creating ordered and unordered lists in the editor.
The feature is enabled by default in all CKEditor 5 WYSIWYG editor builds.
{@snippet features/lists-source}
Use the editor below to see the list feature plugin in action.
{@snippet features/lists-basic}
The {@link module:list/liststyle~ListStyle list styles} feature allows customizing the list's marker.
Use the editor below to see the list styles feature plugin in action.
{@snippet features/lists-style}
To add this feature to your editor, install the @ckeditor/ckeditor5-list package:
npm install --save @ckeditor/ckeditor5-list
Then add the ListStyle plugin to your plugin list and the toolbar configuration:
import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ ListStyle, ... ],
toolbar: [ 'bulletedList', 'numberedList', ... ],
} )
.then( ... )
.catch( ... );
Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
The {@link module:list/liststyle~ListStyle} feature overrides UI button implementations from the {@link module:list/listui~ListUI}.
You can read more about the feature in the {@link features/todo-lists To-do lists} feature guide.
The {@link module:list/list~List} plugin registers:
'numberedList'} command.'bulletedList'} command.'indentList'} command.'outdentList'} command.'numberedList' ui button.'bulletedList' ui button.The {@link module:list/liststyle~ListStyle} plugin registers:
The {@link module:list/liststylecommand~ListStyleCommand 'listStyle'} command that accepts a type of a list style to set.
editor.execute( 'listStyle', { type: 'decimal' } );
The available types are:
'disc', 'circle', and 'square'.'decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-latin', and 'upper-latin'.The 'numberedList' ui split button (it overrides UI button registered by the List plguin.
The 'bulletedList' ui split button (it overrides UI button registered by the List plguin.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-list.