Working-with-Lists.md

layout	post
title	Working with Lists operation in RichTextEditor widget
description	Working with Lists customization for RichTextEditor widget
platform	Angular
control	RichTextEditor
documentation	ug

Working with Lists

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.

{% highlight html %}

<textarea id="texteditor" ej-rte [value]="val" [(toolsList)]="toolslist" [(tools)]="tools"></textarea>

{% endhighlight %}

{% highlight html %}

import {Component} from '@angular/core'; @Component({ selector: 'sd-home', templateUrl: 'app/components/rte/rte.component.html' }) export class RTEComponent { val: string; toolslist: any; tools: Object; constructor() { this.val = "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images," + " it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea."; this.toolslist = ["lists"]; this.tools = { lists: ["unorderedList", "orderedList"] }; } }

{% endhighlight %}

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](http://help.syncfusion.com/api/js/ejrte#members:tools-customOrderedList-name)'| markdownify }}	Specifies the name for customOrderedList item.
{{'[tooltip](http://help.syncfusion.com/api/js/ejrte#members:tools-customOrderedList-tooltip)'| markdownify }}	Specifies the title for customOrderedList item.
{{'[css](http://help.syncfusion.com/api/js/ejrte#members:tools-customOrderedList-css)'| markdownify }}	Specifies the styles for customOrderedList item.
{{'[text](http://help.syncfusion.com/api/js/ejrte#members:tools-customOrderedList-text)'| markdownify }}	Specifies the text for customOrderedList item.
{{'[listStyle](http://help.syncfusion.com/api/js/ejrte#members:tools-customOrderedList-listStyle)'| markdownify }}	Specifies the list style for customOrderedList item.
{{'[listImage](http://help.syncfusion.com/api/js/ejrte#members:tools-customOrderedList-listImage)'| markdownify }}	Specifies the image for customOrderedList item.

{% highlight html %}

<textarea id="texteditor" ej-rte [value]="val" [(toolsList)]="toolslist" [(tools)]="tools"></textarea>

{% endhighlight %}

{% highlight html %}

import {Component} from '@angular/core'; @Component({ selector: 'sd-home', templateUrl: 'app/components/rte/rte.component.html' }) export class RTEComponent { val: string; toolslist: any; tools: Object; constructor() { this.val = "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images," + " it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea."; this.toolslist = ["lists"]; this.tools = { lists: ["orderedList"], customOrderedList: [{ name: "orderedInsert", tooltip: "Custom OrderedList", css: "e-rte-toolbar-icon e-rte-listitems customOrdered", text: "Lower-Greek", listStyle: "lower-greek" }] }; } }

{% endhighlight %}

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](http://help.syncfusion.com/api/js/ejrte#members:tools-customUnorderedList-name)'| markdownify }}	Specifies the name for customUnorderedList item.
{{'[tooltip](http://help.syncfusion.com/api/js/ejrte#members:tools-customUnorderedList-tooltip)'| markdownify }}	Specifies the title for customUnorderedList item.
{{'[css](http://help.syncfusion.com/api/js/ejrte#members:tools-customUnorderedList-css) '| markdownify }}	Specifies the styles for customUnorderedList item.
{{'[text](http://help.syncfusion.com/api/js/ejrte#members:tools-customUnorderedList-text) '| markdownify }}	Specifies the text for customUnorderedList item.
{{'[listStyle](http://help.syncfusion.com/api/js/ejrte#members:tools-customUnorderedList-listStyle) '| markdownify }}	Specifies the list style for customUnorderedList item.
{{'[listImage](http://help.syncfusion.com/api/js/ejrte#members:tools-customUnorderedList-listImage) '| markdownify }}	Specifies the image for customUnorderedList item.

{% highlight html %}

<textarea id="texteditor" ej-rte [value]="val" [(toolsList)]="toolslist" [(tools)]="tools"></textarea>

{% endhighlight %}

{% highlight html %}

import {Component} from '@angular/core'; @Component({ selector: 'sd-home', templateUrl: 'app/components/rte/rte.component.html' }) export class RTEComponent { val: string; toolslist: any; tools: Object; constructor() { this.val = "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images," + " it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea."; this.toolslist = ["lists"]; this.tools = { lists: ["unorderedList"], customUnorderedList: [{ name: "UnorderedInsert", tooltip: "Custom UnorderedList", css: "e-rte-toolbar-icon e-rte-unlistitems customunOrdered", text: "Smiley", listImage: "url('../content/images/rte/Smiley-GIF.gif')" }] }; } }

{% endhighlight %}