The {@link module: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 implementations from the {@link module:list/listui~ListUI} because they share the same names.
You can read more about the feature in the {@link features/todo-lists To-do lists} feature guide.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-list.