Working with Lists

12 Jun 20234 minutes to read

The editor provides tools to makes your content as list such as an ordered and unordered list.

Create a Lists

By default, Insert Lists tool is enabled in the editor’s toolbar.The editor’s have ordered and unordered list types.

  • CSHTML
    • @{
    List<String> toolsList = new List<string>() { "lists" };
    List<String> lists = new List<string>() { "unorderedList", "orderedList" };
}
<ej-rte id="rteSample" tools-list="toolsList" width="820px">
    <e-content-template>
        <div>
            The Rich Text Editor(RTE) control is an easy to render in client side. Customer easy to edit the contents
            and get the HTML content for the displayed content. A rich text editor control provides
            users with a toolbar that helps them to apply rich text formats to the text entered
            in the text area.
        </div>
    </e-content-template>
    <e-tools lists="lists"></e-tools>
</ej-rte>

    Custom Lists

    You can use custom lists tools to insert lists with custom behaviors.You can create a list with related attributes (such as listImage, listStyle, title, name, and text) using the custom list tool.Ordered and Unordered list having own customize ways to insert a list into the editor’s content.

    Insert a customOrderedList

    you need to enable customOrderedList tool on the editor’s toolbar.

    The customOrderedList having below options for an ordered list customization.

    Option

    		 Summary
    name Specifies the name for customOrderedList item.
    tooltip Specifies the title for customOrderedList item.
    CSS Specifies the styles for customOrderedList item.
    text Specifies the text for customOrderedList item.
    listStyle Specifies the list style for customOrderedList item.
    listImage Specifies the image for customOrderedList item.
  • CSHTML
    • @{
    List<String> toolsList = new List<string>() { "lists" };
    List<String> lists = new List<string>() { "orderedList" };
}
<ej-rte id="rteSample" tools-list="toolsList">
    <e-content-template>
        <p>
            The Rich Text Editor
            (RTE) control is an easy to render in client side. Customer easy to edit the contents
            and get the HTML content for the displayed content. A rich text editor control provides
            users with a toolbar that helps them to apply rich text formats to the text entered
            in the text area.
        </p>
    </e-content-template>
    <e-tools lists="lists">
        <e-custom-ordered-lists>
            <e-custom-ordered-list css="e-rte-toolbar-icon e-rte-listitems customOrder" list-style="lower-greek" name="orderInsert" tooltip="Custom Orderlist" text="Lower-Greek" />
        </e-custom-ordered-lists>
    </e-tools>
</ej-rte>

    Insert a customUnorderedList

    you need to enable customUnorderedList tool on the editor’s toolbar.

    The customUnorderedList having below options for an unordered list customization.

    Option

    		 Summary
    name Specifies the name for customUnorderedList item.
    tooltip Specifies the title for customUnorderedList item.
    CSS Specifies the styles for customUnorderedList item.
    text Specifies the text for customUnorderedList item.
    listStyle Specifies the list style for customUnorderedList item.
    listImage Specifies the image for customUnorderedList item.
  • CSHTML
    • @{
    List<String> toolsList = new List<string>() { "lists" };
    List<String> lists = new List<string>() { "unorderedList" };
}
<ej-rte id="rteSample" tools-list="toolsList">
    <e-content-template>
        <p>
            The Rich Text Editor
            (RTE) control is an easy to render in client side. Customer easy to edit the contents
            and get the HTML content for the displayed content. A rich text editor control provides
            users with a toolbar that helps them to apply rich text formats to the text entered
            in the text area.
        </p>
    </e-content-template>
    <e-tools lists="lists">
            <e-custom-unordered-lists>
                <e-custom-unordered-list css="e-rte-toolbar-icon e-rte-unlistitems customUnOrder" list-image="url('../images/rte/smiley-gif.gif')" name="unOrderInsert" text="Smiley" tooltip="Custom UnOrderList" />
            </e-custom-unordered-lists>   
    </e-tools>
</ej-rte>