Getting started with Angular RichTextEditor

29 Nov 20233 minutes to read

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.

<!DOCTYPE html>
<html>
   <head> 
    <link href="//cdn.syncfusion.com/25.1.35/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/25.1.35/js/web/ej.web.all.min.js" type="text/javascript"></script>
    <script src ="http://cdn.syncfusion.com/25.1.35/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>

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',
})
export class AppComponent {  
}

Now, the RTE is rendered.

Angular 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>

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.

Angular RichTextEditor tools.

You can set the content of the editor as follows.

HTML

<textarea ej-rte width="600px" height="300px" [(value)]="content"></textarea>

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.

Angular RichTextEditor value.