Working with Lists
27 Apr 20182 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.
@{
List<String> toolsList = new List<string>() { "lists" };
List<String> lists = new List<string>() { "unorderedList", "orderedList" };
}
@{Html.EJ().RTE("rteSample").Width("800px").ContentTemplate(@<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>)
.ToolsList(toolsList)
.Tools(tool => tool.Lists(lists))
.Render();}
<br />
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. |
@{Html.EJ().RTE("rteSample").Width("800px").ContentTemplate(@<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>)
.Tools(tool => tool.CustomOrderList(customOrder => customOrder.Css("e-rte-toolbar-icon e-rte-listitems customOrder").ListStyle("lower-greek").Name("orderInsert").Tooltip("Custom OrderList").Text("Lower-Greek").Add()))
.Render();}
<br />
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("rteSample").Width("800px").ContentTemplate(@<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>)
.Tools(tool => tool.CustomOrderList(customOrder => customOrder.Css("e-rte-toolbar-icon e-rte-listitems customOrder").ListStyle("lower-greek").Name("orderInsert").Tooltip("Custom OrderList").Text("Lower-Greek").Add()))
.Render();}
<br />