Contribute to this guide

guideTo-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-do list 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

Waffles with raspberries and whipped cream.

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( /* ... */ );

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:

# Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-list.