Nested multi-level lists in an ASP.NET Core rich text editor

Outlines, legal clauses and instructions often need sub-items. In RichTextBox, nesting a list is a matter of indenting an item.

The toolbar

<richtextbox name="Body"
             toolbar="{insertorderedlist,insertunorderedlist,indent,outdent}|{bold,italic}|{undo,redo}"
             height="350px"></richtextbox>

Making a sub-list

Put the caret in a list item and press Indent or Tab. The item becomes a child of the one above. Outdent or Shift+Tab moves it back out.

Mixing numbers and bullets

A sub-list can be a different type from its parent. Select the indented items and press the other list button:

<ol>
  <li>Prepare
    <ul><li>Check the data</li></ul>
  </li>
  <li>Publish</li>
</ol>

Saved structure

Sub-lists are saved inside their parent item, which is correct HTML, so they keep their meaning in screen readers and in Word export. If your published page shows nested items with no indent, your CSS has probably removed it; give nested lists their own padding.