Getting started

This section helps to understand the getting started of RTE control with the step-by-step instruction.

Create RTE Control

Create an HTML page and add the scripts references in the order mentioned in the following code example.

  • html
  • <!DOCTYPE html>
    <html>
       <head> 
        <link href="//cdn.syncfusion.com/16.4.0.42/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
        <script src="http://cdn.syncfusion.com/16.4.0.42/js/web/ej.web.all.min.js" type="text/javascript"></script>
        <script src ="http://cdn.syncfusion.com/16.4.0.42/js/common/ej.angular2.min.js"></script>
        <script src="systemjs.config.js"></script>
      </head>
      <body>
       <ej-app>Loading...</ej-app>
      </body>
    </html>

    Initialize RTE

    In the rte component HTML file.

  • html
  • <textarea ej-rte width="600px" height="300px"></textarea>
  • js
  • import {Component, ViewEncapsulation} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'app/app.component.html',
    })
    export class AppComponent {  
    }

    Now, the RTE is rendered.

    RTE

    Toolbar–Configuration

    You can configure a toolbar with the tools as your application requires.

  • html
  • <textarea ej-rte width="600px" height="300px" [(toolsList)]="tools"></textarea>
  • js
  • import {Component} from '@angular/core';
    
    @Component({
      selector: 'my-app',
      templateUrl: 'app/components/rating/rating.component.html'
    })
    export class RatingComponent {
        tools: any; 
        constructor() {
            this.tools = ["formatStyle", "font", "style", "effects", "alignment", "lists", "indenting", "clipboard", "doAction", "clear", "casing", "customTools", "print"];  
        }
    }

    The above code example displays the following output.

    tools

    You can set the content of the editor as follows.

  • html
  • <textarea ej-rte width="600px" height="300px" [(value)]="content"></textarea>
  • js
  • import {Component, ViewEncapsulation} from '@angular/core';
    
    @Component({
      selector: 'ej-app',
      templateUrl: 'app/app.component.html',
    })
    export class AppComponent {
    	content:string;
    	  constructor() {
    		  this.content="Description: 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 from RTE";
    	  }
    }

    The following screenshot displays a RTE widget.

    value