Working with Lists

8 Sep 20162 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.

<ej:RTE ID="rteSample" AllowEditing="true" ToolsList="lists" runat="server">
    <Tools Lists="unorderedList,orderedList">
    </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
Insert a customUnorderedList

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.

HTML

<ej:RTE ID="rteSample" AllowEditing="true" ToolsList="lists" runat="server">
    <Tools Lists="unorderedList,orderedList">
            <CustomOrderedList>
                    <ej:CustomOrderedList Text="Lower-Greek" ListStyle="lower-greek" Name="orderInsert" Tooltip="Custom OrderList" Css="e-rte-toolbar-icon e-rte-listitems customOrder" />
            </CustomOrderedList> 
    </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.

HTML

<ej:RTE ID="rteSample" AllowEditing="true" ToolsList="lists" runat="server">
    <Tools Lists="unorderedList,orderedList">
        <CustomUnorderedList>
            <ej:CustomUnorderedList Text="Smiley" ListImage="url('../Content/images/rte/Smiley-GIF.gif')" Name="unOrderInsert" Tooltip="Custom UnOrderList" Css="e-rte-toolbar-icon e-rte-unlistitems customUnOrder" />
        </CustomUnorderedList>
    </Tools>
</ej:RTE>