keerthanaRajendran/app.html

## app.html
<template>
 <div>
        <textarea id="rteSample" rows="10" cols="30" ej-rte="e-width:100%" ></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" />
     <link rel="stylesheet" href="style.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());
}

## style.css

      .e-icon.e-close
      {
        font-size:15px;
        margin-left: 90px;
        width:25px;
      }
	<template>
	<div>
	<textarea id="rteSample" rows="10" cols="30" ej-rte="e-width:100%" ></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" />
	<link rel="stylesheet" href="style.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());
	}

	.e-icon.e-close
	{
	font-size:15px;
	margin-left: 90px;
	width:25px;
	}