How todo works

You can create to-do lists or checklists in Redactor. This is done in several ways.

Add #

Add todo list using the Addbar menu by clicking the Add (+) button and selecting 'Todo' from the list.

Format #

Place the cursor in some block of text and click the 'Format' button on the toolbar. Now select 'Todo' to turn the text into a checklist item.

The same works the other way around. You can turn any todo into text or any other format.

HTML #

In the initial HTML todo, lists are marked in a special way. Add [x] (x is a letter) to the list item if it is a checked item. Or [ ] (a space inside) if it is not a checked item.

<ul>
    <li>[x] Item checked</li>
    <li>[ ] Item</li>
    <li>[ ] Item</li>
</ul>

We designed the input and output syntax to be highly flexible, allowing you to easily integrate and customize it within your application. This means you can effortlessly swap out placeholder characters for the specific elements you require, such as icons or checkboxes.

JSON #

Todo lists work even if you set Redactor content using a JSON object. Here's what it might look like:

Redactor('#entry', {
    data: {
        "blocks": [{
            "type": "todo",
            "items": [
                {
                  "content": "Item checked",
                  "checked": true
                },
                {
                  "content": "Item",
                  "checked": false
                },
                {
                  "content": "Item",
                  "checked": false
                }
            ]
        }
    ]}
});

In this case, the checked state is indicated by a corresponding flag at the item.

See more about setting JSON data.

Reorder #

You can sort todo list items by dragging and dropping. To do this, move the cursor to the left control and drag the list item up or down.

You can also sort the list itself within the entire content. To do this, click on the control on the left of any list item and select 'Parent'.

This command will select the todo list as a whole. It can now be dragged and dropped with all its items.