Numbered and bulleted lists in an ASP.NET Core rich text editor

Lists are how people make text easy to scan. RichTextBox has insertorderedlist for numbers and insertunorderedlist for bullets, in the default and full toolbars.

Add the buttons

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

Using them

Select some lines and press a button, and each line becomes an item. Pressing Enter adds the next item, and pressing Enter on an empty item ends the list.

The saved HTML

<ol><li>First item</li><li>Second item</li></ol>
<ul><li>A bullet</li></ul>

Real list tags mean screen readers announce "list, 2 items", and Word export produces real lists.

Where did my bullets go?

This is the most common complaint, and the cause is usually not the editor. Many CSS resets, including Tailwind's, remove list markers. So bullets show in the editor and vanish on the published page. Add this for the area where you show content:

.article ul { list-style: disc; padding-left: 1.25rem; }
.article ol { list-style: decimal; padding-left: 1.25rem; }

Typing shortcuts

People can also start a line with - or 1. as in Markdown, or use slash commands.