Checklists

A list with a box in front of each item, for packing lists, to-dos and check items. Click a box to tick it; ticked items turn grey and get crossed out.

createEditor('#editor', {
  toolbar: 'checklist bulletList orderedList',
});

Making and ticking

• The checklist button or Ctrl+Shift+9. Inside a bulleted list it turns that list into a checklist; press again to go back.
• At the start of an empty line, [ ] starts an empty box and [x] a ticked one.
• Click the box at the left of an item to tick or untick it. This can be undone like any edit.
• New items made with Enter start unticked.
• In read-only mode the boxes don't change.

Presets

On the first row of full, under ⋯ more in board (default), not in basic or minimal. Also in the listMenu menu.

Saved HTML

<ul data-checklist="">
  <li data-checked="true">Book the meeting room</li>
  <li data-checked="false">Send the slides</li>
</ul>

The boxes are drawn with CSS. Load 82editor.css on your view page and give the element around the post class="e82-view" to get the same boxes, or draw them yourself:

ul[data-checklist] { list-style: none; padding-left: 4px; }
ul[data-checklist] > li::before { content: '☐ '; }
ul[data-checklist] > li[data-checked='true']::before { content: '☑ '; }
ul[data-checklist] > li[data-checked='true'] { color: #6e7781; text-decoration: line-through; }

As Markdown, items come out as - [x] Book the meeting room.

Options