Skip to main content
Client Center Buy
Menu

Add a checklist to an ASP.NET Core rich text editor

The editor toolbar with a checklist button

Meeting actions and release steps read better as a checklist people can tick. The button is named inserttodolist, and it is in the More panel of the preset toolbars.

Add it

<richtextbox name="Body"
             toolbar="{inserttodolist,bold,italic}|{undo,redo}"
             height="300px"></richtextbox>

Using it

Select lines and press the button. Each becomes an item with a box, and clicking the box ticks it. The tick is part of the document, so it is saved with it.

What is saved

<ul class="rte-task-list">
  <li class="rte-task-item" data-checked="false">...</li>
</ul>

The state is in data-checked, which your own code can read, for example to show "3 of 5 done".

Showing it on your page

Outside the editor, those classes need your own CSS to look like checkboxes. Give the items a style of your own:

.rte-task-list { list-style: none; padding-left: 0; }
.rte-task-item[data-checked="true"] { text-decoration: line-through; color: #5f6368; }

Check the cleaning

If you save through [RichTextHtml], try a checklist before going live, and confirm that the classes and data-checked survive your policy. If they do not, adjust the policy in options.Sanitizer.

Read next