keerthanaRajendran/app.html

## app.html
<template>
 <div>
        <textarea id="rteSample" rows="10" cols="30" style="width: 740px; height: 440px" ej-rte="e-list.bind:list;e-tools.bind:tools">
                  &lt;p&gt;&lt;b&gt;Description:&lt;/b&gt;&lt;/p&gt;
    &lt;p&gt;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. &lt;/p&gt;
    &lt;p&gt;&lt;b&gt;Functional
    Specifications/Requirements:&lt;/b&gt;&lt;/p&gt;
    &lt;ol&gt;&lt;li&gt;&lt;p&gt;Provide
    the tool bar support, it’s also customizable.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Options
    to get the HTML elements with styles.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Support
    to insert image from a defined path.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Footer
    elements and styles(tag / Element information , Action button (Upload, Cancel))&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Re-size
    the editor support. &lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Provide
    efficient public methods and client side events.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Keyboard
    navigation support.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;
        </textarea>
    </div>

</template>

## app.js
export class EventsDropDownList {
   tool= {style: ["bold", "italic"], lists: ["unorderedList", "orderedList"],doAction: ["undo", "redo"],links: ["createLink"],images: ["image"] };
    list = ["style", "lists", "doAction", "links", "images"];
    constructor() {
    this.list = this.list;
    this.tools = this.tool;
  }

}

## index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential Studio for JavaScript">
    <meta name="author" content="Syncfusion">
    <title>Untitled</title>
    <!-- Essential Studio for JavaScript  theme reference -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/19.1.0.54/js/web/flat-azure/ej.web.all.min.css" />
    	<script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js" type="text/javascript"> </script>
</head>
<body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-syncfusion-bundles/0.0.1/config2.js"></script>
    <script>
        System.import('aurelia-bootstrapper');
    </script>
     <style type="text/css" class="cssStyles">

    </style>
</body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-syncfusion-bridge', syncfusion => syncfusion.useAll());

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<div>
	<textarea id="rteSample" rows="10" cols="30" style="width: 740px; height: 440px" ej-rte="e-list.bind:list;e-tools.bind:tools">
	<p><b>Description:</b></p>
	<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>
	<p><b>Functional
	Specifications/Requirements:</b></p>
	<ol><li><p>Provide
	the tool bar support, it’s also customizable.</p></li><li><p>Options
	to get the HTML elements with styles.</p></li><li><p>Support
	to insert image from a defined path.</p></li><li><p>Footer
	elements and styles(tag / Element information , Action button (Upload, Cancel))</p></li><li><p>Re-size
	the editor support. </p></li><li><p>Provide
	efficient public methods and client side events.</p></li><li><p>Keyboard
	navigation support.</p></li></ol>
	</textarea>
	</div>

	</template>
	export class EventsDropDownList {
	tool= {style: ["bold", "italic"], lists: ["unorderedList", "orderedList"],doAction: ["undo", "redo"],links: ["createLink"],images: ["image"] };
	list = ["style", "lists", "doAction", "links", "images"];
	constructor() {
	this.list = this.list;
	this.tools = this.tool;
	}

	}
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Essential Studio for JavaScript">
	<meta name="author" content="Syncfusion">
	<title>Untitled</title>
	<!-- Essential Studio for JavaScript theme reference -->
	<link rel="stylesheet" href="https://cdn.syncfusion.com/19.1.0.54/js/web/flat-azure/ej.web.all.min.css" />
	<script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js" type="text/javascript"> </script>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-syncfusion-bundles/0.0.1/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	<style type="text/css" class="cssStyles">

	</style>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-syncfusion-bridge', syncfusion => syncfusion.useAll());

	aurelia.start().then(a => a.setRoot());
	}