To-do lists
The to-do list feature lets you create a list of interactive checkboxes with labels. It supports all features of bulleted and numbered lists, so you can nest a to-do list together with any combination of other lists.
# Demo
Use the to-do list toolbar button to add a list to the editor content. Thanks to the integration with the autoformatting feature, you can also start a line with [ ]
or [x]
followed by a space to insert an unchecked or checked list item.
Waffles
Ingredients
Directions
Prep | Cook | Ready In |
---|---|---|
5 m | 15 m | 20 m |
Preheat the waffle iron. Beat eggs in a large bowl with a hand beater until fluffy. Beat in flour, milk, vegetable oil, sugar, baking powder, salt, and vanilla, just until smooth.
Spray the preheated waffle iron with non-stick cooking spray. Pour the mix onto the hot waffle iron. Cook until golden brown. Serve hot.
Source: allrecipes
This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.
# Keyboard support
You can check and clear a list item by using the Ctrl + Enter (Cmd + Enter on Mac) shortcut when the selection is in that item.
# 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.
After installing the editor, add the feature to your plugin list and toolbar configuration:
import { TodoList } from 'ckeditor5';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ TodoList, /* ... */ ],
toolbar: [ 'todoList', /* ... */ ],
} )
.then( /* ... */ )
.catch( /* ... */ );
# Related features
These CKEditor 5 features provide similar functionality:
- Ordered and unordered lists – Create ordered and unordered lists with configurable markers.
- Multi-level lists – Multi-level lists allow the user to set different markers (symbols, text or numbers) to display at each level of the list.
- Autoformatting – Format the text on the go with Markdown code.
# Common API
The TodoList
plugin registers:
- The
'todoList'
command. - The
'checkTodoList'
command. - The
'todoList'
UI button.
# Contribute
The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-list.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.
With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.