List Formatting in ASP.NET MVC Rich Text Editor Control

4 Mar 20255 minutes to read

List formatting in the Rich Text Editor allows users to organize content into structured lists, enhancing readability and visual presentation. The control supports two main types of lists:

  1. Ordered Lists
  2. Unordered Lists

Ordered Lists

Ordered lists present items in a specific sequence, with each item preceded by a number or letter. The Rich Text Editor provides two ways to create and manage ordered lists:

Using the OrderedList Tool

The OrderedList toolbar item offers a quick way to create or toggle a numbered list. To use it, select the desired text in the editor and click the OrderedList button in the toolbar. If the selected text is not already a numbered list, it will be converted into one. If it’s already a numbered list, clicking the button will remove the list formatting.

NumberFormatList Tool

For more detailed control over the numbering style, use the NumberFormatList dropdown in the toolbar. Select the desired text in the editor, then choose the preferred format from the NumberFormatList dropdown. The selected text will be transformed into a numbered list with the chosen style.

Available Numbering Styles:

  • None: Removes numbering while maintaining list structure and indentation
  • Number: Uses standard numeric sequencing (1, 2, 3, …)
  • Lower Roman: Employs lowercase Roman numerals (i, ii, iii, …)
  • Lowercase Greek: Utilizes lowercase Greek letters (α, β, γ, …)
  • Upper Alpha: Applies uppercase letters (A, B, C, …)
  • Lower Alpha: Uses lowercase letters (a, b, c, …)
  • Upper Roman: Employs uppercase Roman numerals (I, II, III, …)

You can customize the available number formats using the NumberFormatList property of the Rich Text Editor.

The following example demonstrates how to customize the number format lists in the Rich Text Editor:

@Html.EJS().RichTextEditor("format-lists").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.value = @"<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
        ViewBag.items = new[] { "NumberFormatList"};
        return View();
    }
}

Unordered Lists

Unordered lists present items with visual markers, providing an effective way to list items without implying order or priority. The Rich Text Editor offers two methods for creating and managing unordered lists:

Using the UnorderedList Tool

The UnorderedList toolbar item provides a fast way to create or toggle a bulleted list. To use it, select the desired text in the editor and click the UnorderedList button in the toolbar. If the selected text is not already a bulleted list, it will be converted into one. If it’s already a bulleted list, clicking the button will remove the list formatting.

BulletFormatList Tool

For more control over the bullet style, use the BulletFormatList dropdown in the toolbar. Select the desired text in the editor, then choose the preferred format from the BulletFormatList dropdown. The selected text will be transformed into a bullet list with the chosen style.

Available Bullet Styles:

  • None: Removes bullet points while maintaining list structure and indentation
  • Disc: Displays solid circular bullets
  • Square: Uses solid square bullets
  • Circle: Presents hollow circular bullets

The following example demonstrates how to customize the bullet format lists in the Rich Text Editor:

@Html.EJS().RichTextEditor("format-lists").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.value = @"<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
        ViewBag.items = new[] { "BulletFormatList" };
        return View();
    }
}

Indentation in Lists

The Rich Text Editor provides powerful indentation features for both bullet and number format lists, allowing users to create nested lists and adjust list levels easily.

Increasing Indent

To increase the indent of a list item:

  1. Select the list item you want to indent.
  2. Click the “Increase Indent” button in the toolbar or press Ctrl + ].
  3. The selected item will be indented, creating a nested list.

Decreasing Indent

To decrease the indent of a list item:

  1. Select the indented list item.
  2. Click the “Decrease Indent” button in the toolbar or press Ctrl + [.
  3. The selected item will move back to the previous indentation level.

Using Tab Key for Indentation

The Tab key provides a quick way to adjust list indentation:

  • Pressing Tab will increase the indent of the selected list item, creating a nested list.
  • Pressing Shift + Tab will decrease the indent of the selected list item, moving it to the previous level.

This behavior allows for efficient creation and management of multi-level lists without the need to use the toolbar buttons.

See Also

Increase and Decrease Indent Levels