Search results

Getting started

This section explains the steps to create a simple RichTextEditor component and configure its available functionalities in Angular.

Getting Started with Angular CLI

The following section explains the steps required to create a simple angular-cli application and how to configure RichTextEditor component.

Prerequisites

To get started with Syncfusion Angular UI Components, make sure that you have compatible versions of Angular and TypeScript.

  • Angular : 4+
  • TypeScript : 2.6+

Setting up an Angular project

Angular provides an easiest way to setup project using Angular CLI Angular CLI tool.

Install the CLI application globally in your machine.

  npm install -g @angular/cli

Create a new application

  ng new syncfusion-angular-app

Once you have executed the above command you may ask for following options,

  • Would you like to add Angular routing?
  • Which stylesheet format would you like to use?

By default it install the CSS style based application. To setup with SCSS, add --style=SCSS suffix on creating project.

Example code snippet.

  ng new syncfusion-angular-app --style=SCSS

Use below command to Navigate into the created project folder.

  cd syncfusion-angular-app

Install Syncfusion RichTextEditor package

Syncfusion packages are distributed in npm server as @syncfusion scoped packages. You can get all the Angular Syncfusion package from npm link.

Add Syncfusion Angular RichTextEditor package in your application by using following Command,

npm install @syncfusion/ej2-angular-richtexteditor --save
(or)
npm i @syncfusion/ej2-angular-richtexteditor --save

Adding RichTextEditor module

Once you have successfully installed the RichTextEditor package, corresponding component modules are ready to configure in your application from the installed location. Syncfusion Angular package provides two different types of ngModules.

Refer to Ng-Module to learn about ngModules.

Refer to the following snippet to import the RichTextEditorModule in app.module.ts from the @syncfusion/ej2-angular-layouts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// Imported Syncfusion RichTextEditorModule from richtexteditor package
import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // Registering EJ2 RichTextEditor Module
    RichTextEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding RichTextEditor component

Add the RichTextEditor component snippet in app.component.ts as follows.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
  selector: 'app-root',
  template: `<ejs-richtexteditor id='defaultRTE'>
  <ng-template #valueTemplate>
  <p>The RichTextEditor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
  Users can format their content using standard toolbar commands.</p>
  <p><b>Key features:</b></p>
  <ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li>
  <li><p>Capable of handling markdown editing.</p></li>
  <li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
  <li><p>Provides a fully customizable toolbar.</p></li>
  <li><p>Provides HTML view to edit the source directly for developers.</p></li>
  <li><p>Supports third-party library integration.</p></li>
  <li><p>Allows preview of modified content before saving it.</p></li>
  <li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
  <li><p>Contains undo/redo manager. </p></li>
  <li><p>Creates bulleted and numbered lists.</p></li>
  </ul>
  </ng-template>
  </ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent {

}

Adding CSS reference

Add RichTextEditor component styles as given in the angular-cli.json file.

Note: If you are using Angular 6 project, add the changes in angular.json file.

{
"apps": [
  {
    "styles": [
      "src/styles.css",
      "node_modules/@syncfusion/ej2-base/styles/material.css",
      "node_modules/@syncfusion/ej2-icons/styles/material.css",
      "node_modules/@syncfusion/ej2-buttons/styles/material.css",
      "node_modules/@syncfusion/ej2-splitbuttons/styles/material.css",
      "node_modules/@syncfusion/ej2-inputs/styles/material.css",
      "node_modules/@syncfusion/ej2-lists/styles/material.css",
      "node_modules/@syncfusion/ej2-navigations/styles/material.css",
      "node_modules/@syncfusion/ej2-popups/styles/material.css",
      "node_modules/@syncfusion/ej2-richtexteditor/styles/material.css"
    ],
  }
]
}

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components. This web tool is useful to combine the required component scripts and styles in a single file.

Running the application

Run the ng serve command in command window, it will serve your application and you can open the browser window. Output will appear as follows.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
  selector: 'app-root',
  template: `<ejs-richtexteditor id='defaultRTE'>
  <ng-template #valueTemplate>
  <p>The RichTextEditor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
  Users can format their content using standard toolbar commands.</p>
  <p><b>Key features:</b></p>
  <ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li>
  <li><p>Capable of handling markdown editing.</p></li>
  <li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
  <li><p>Provides a fully customizable toolbar.</p></li>
  <li><p>Provides HTML view to edit the source directly for developers.</p></li>
  <li><p>Supports third-party library integration.</p></li>
  <li><p>Allows preview of modified content before saving it.</p></li>
  <li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
  <li><p>Contains undo/redo manager. </p></li>
  <li><p>Creates bulleted and numbered lists.</p></li>
  </ul>
  </ng-template>
  </ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent {

}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule,
        RichTextEditorAllModule,
        DialogModule
    ],
    declarations: [AppComponent, DropDownListComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion Angular RichTextEditor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/javascript.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/css.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/xml.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/htmlmixed.js" type="text/javascript"></script>
    <link href="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.min.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
    <style>
    #loader {
        color: #008cff;
        font-family:  'Helvetica Neue','calibiri';
        font-size: 16px;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
     .e-code-mirror::before {
        content: '\e345';
    }
    .CodeMirror-linenumber,
    .CodeMirror-gutters {
        display: none;
    }

    .char_block.e-active {
        /* box-shadow: inset 3px 3px 7px 0px; */
        outline: 1.5px solid;
    }

    .char_block {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 5px 5px 0;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #DDDDDD;
        font-size: 20px;
        cursor: pointer;
        user-select: none;
    }

  .e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
        content: "\e76e";
    }

    .e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
        content: "\e726";
    }

    .e-richtexteditor textarea.e-content {
      float: left;
    }
    .e-richtexteditor .e-rte-content {
      overflow: hidden;
    }
    .e-rte-content .e-content.e-pre-source{
      width: 100%;
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

	.e-icon-btn .e-md-preview.e-icons::before {
		content: '\e345';
	}

</style>
</head>

<body>
    <app-root>
        <div id='loader'>Loading....</div>
    </app-root>
</body>

</html>

Initialize RichTextEditor from <iframe> element

The RichTextEditor’s content is placed in an iframe and isolated from the rest of the page.

Initialize the RichTextEditor on div element and set the enable field iframeSettings property to true.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
  selector: 'app-root',
  template: `<ejs-richtexteditor id='iframeRTE' [toolbarSettings]='tools' [iframeSettings]='iframe' [height]='height'>
  <ng-template #valueTemplate>
  <p>The RichTextEditor component is WYSIWYG ("what you see is what you get") editor
        that provides the best user experience to create and update the content.
            Users can format their content using standard toolbar commands.</p>

            <p><b>Key features:</b></p>

            <ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li>
            <li><p>Capable of handling markdown editing.</p></li>
            <li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
            <li><p>Provides a fully customizable toolbar.</p></li>
            <li><p>Provides HTML view to edit the source directly for developers.</p></li>
            <li><p>Supports third-party library integration.</p></li>
            <li><p>Allows preview of modified content before saving it.</p></li>
            <li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
            <li><p>Contains undo/redo manager.</p></li>
            <li><p>Creates bulleted and numbered lists.</p></li>
            </ul>
  </ng-template>
  </ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent {
        public tools: object = {
            items: ['Undo', 'Redo', '|',
                'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
                'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
                'SubScript', 'SuperScript', '|',
                'LowerCase', 'UpperCase', '|',
                'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|',
                'Indent', 'Outdent', '|', 'CreateLink',
                'Image', '|', 'ClearFormat', 'Print', 'SourceCode', '|', 'FullScreen']
        };
        public iframe: object = { enable: true };
        public height: number = 500;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule,
        RichTextEditorAllModule,
        DialogModule
    ],
    declarations: [AppComponent, DropDownListComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion Angular RichTextEditor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/javascript.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/css.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/xml.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/htmlmixed.js" type="text/javascript"></script>
    <link href="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.min.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
    <style>
    #loader {
        color: #008cff;
        font-family:  'Helvetica Neue','calibiri';
        font-size: 16px;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
     .e-code-mirror::before {
        content: '\e345';
    }
    .CodeMirror-linenumber,
    .CodeMirror-gutters {
        display: none;
    }

    .char_block.e-active {
        /* box-shadow: inset 3px 3px 7px 0px; */
        outline: 1.5px solid;
    }

    .char_block {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 5px 5px 0;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #DDDDDD;
        font-size: 20px;
        cursor: pointer;
        user-select: none;
    }

  .e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
        content: "\e76e";
    }

    .e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
        content: "\e726";
    }

    .e-richtexteditor textarea.e-content {
      float: left;
    }
    .e-richtexteditor .e-rte-content {
      overflow: hidden;
    }
    .e-rte-content .e-content.e-pre-source{
      width: 100%;
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

	.e-icon-btn .e-md-preview.e-icons::before {
		content: '\e345';
	}

</style>
</head>

<body>
    <app-root>
        <div id='loader'>Loading....</div>
    </app-root>
</body>

</html>

Module Injection

To create RichTextEditor with additional features, inject the required modules. The following modules are used to extend RichTextEditor’s basic functionality.

  • toolbar - Inject this module to use Toolbar features.
  • link - Inject this module to use link features in RTE.
  • image- Inject this module to use image features in RTE.
  • count - Inject this module to use character count in RTE.
  • markdownEditor-Inject this module to use RTE as markdown editor.
  • htmlEditor - Inject this module to use RTE as html editor.
  • quickToolbar - Inject this module to use quick toolbar feature for the target element.

These modules should be injected into the provider section of AppModule.

Configure the Toolbar

Configure the toolbar with custom tools using items field of toolbarSettings property in your application.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
  selector: 'app-root',
  template: `<ejs-richtexteditor id='rteTool' [toolbarSettings]='tools'>
  <ng-template #valueTemplate>
  <p>The RichTextEditor triggers events based on its actions. </p>
    <p> The events can be used as an extension point to perform custom operations.</p>
    <ul>
        <li>created - Triggers when the component is rendered.</li>
        <li>change - Triggers only when RTE is blurred and changes are done to the content.</li>
        <li>focus - Triggers when RTE is focused in.</li>
        <li>blur - Triggers when RTE is focused out.</li>
        <li>actionBegin - Triggers before command execution using toolbar items or executeCommand method.</li>
        <li>actionComplete - Triggers after command execution using toolbar items or executeCommand method.</li>
        <li>destroyed – Triggers when the component is destroyed.</li>
    </ul>
  </ng-template>
  </ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent {
  public tools: object = {
      items: ['Undo', 'Redo', '|',
          'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
          'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
          'SubScript', 'SuperScript', '|',
          'LowerCase', 'UpperCase', '|',
          'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|',
          'Indent', 'Outdent', '|', 'CreateLink',
          'Image', '|', 'ClearFormat', 'Print', 'SourceCode', '|', 'FullScreen']
  };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule,
        RichTextEditorAllModule,
        DialogModule
    ],
    declarations: [AppComponent, DropDownListComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion Angular RichTextEditor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/javascript.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/css.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/xml.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/htmlmixed.js" type="text/javascript"></script>
    <link href="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.min.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
    <style>
    #loader {
        color: #008cff;
        font-family:  'Helvetica Neue','calibiri';
        font-size: 16px;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
     .e-code-mirror::before {
        content: '\e345';
    }
    .CodeMirror-linenumber,
    .CodeMirror-gutters {
        display: none;
    }

    .char_block.e-active {
        /* box-shadow: inset 3px 3px 7px 0px; */
        outline: 1.5px solid;
    }

    .char_block {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 5px 5px 0;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #DDDDDD;
        font-size: 20px;
        cursor: pointer;
        user-select: none;
    }

  .e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
        content: "\e76e";
    }

    .e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
        content: "\e726";
    }

    .e-richtexteditor textarea.e-content {
      float: left;
    }
    .e-richtexteditor .e-rte-content {
      overflow: hidden;
    }
    .e-rte-content .e-content.e-pre-source{
      width: 100%;
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

	.e-icon-btn .e-md-preview.e-icons::before {
		content: '\e345';
	}

</style>
</head>

<body>
    <app-root>
        <div id='loader'>Loading....</div>
    </app-root>
</body>

</html>

The image module inserts an image into RichTextEditor’s content area, and the link module links external resources such as website URLs, to selected text in the RichTextEditor’s content, respectively.

The link inject module adds a link icon to the toolbar and the image inject module adds an image icon to the toolbar.

Specifies the items to be rendered in the quick toolbar based on the target element such image, link, and text element. The quick toolbar opens to customize the element by clicking the target element.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.html
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    selector: 'app-root',
    template: `<ejs-richtexteditor id='defaultRTE' [toolbarSettings]='tools' [quickToolbarSettings]='quickTools'>
    <ng-template #valueTemplate>
      <p>The RichTextEditor triggers events based on its actions. </p>
      <p> The events can be used as an extension point to perform custom operations.</p>
      <ul>
          <li>created - Triggers when the component is rendered.</li>
          <li>change - Triggers only when RTE is blurred and changes are done to the content.</li>
          <li>focus - Triggers when RTE is focused in.</li>
          <li>blur - Triggers when RTE is focused out.</li>
          <li>actionBegin - Triggers before command execution using toolbar items or executeCommand method.</li>
          <li>actionComplete - Triggers after command execution using toolbar items or executeCommand method.</li>
          <li>destroyed – Triggers when the component is destroyed.</li>
      </ul>
    </ng-template>
    </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService]
})
export class AppComponent  {
    public tools: object = {
        items: ['Undo', 'Redo', '|',
            'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
            'SubScript', 'SuperScript', '|',
            'LowerCase', 'UpperCase', '|',
            'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|',
            'Indent', 'Outdent', '|', 'CreateLink',
            'Image', '|', 'ClearFormat', 'Print', 'SourceCode', '|', 'FullScreen']
    };
    public quickTools: object = {
        image: [
            'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', '-', 'Display', 'AltText', 'Dimension']
    };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule,
        RichTextEditorAllModule,
        DialogModule
    ],
    declarations: [AppComponent, DropDownListComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion Angular RichTextEditor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/javascript.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/css.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/xml.js" type="text/javascript"></script>
    <script src="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/htmlmixed.js" type="text/javascript"></script>
    <link href="https://jsplayground.syncfusion.com/16.1.0.24/scripts/web/codemirror/codemirror.min.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
    <style>
    #loader {
        color: #008cff;
        font-family:  'Helvetica Neue','calibiri';
        font-size: 16px;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
     .e-code-mirror::before {
        content: '\e345';
    }
    .CodeMirror-linenumber,
    .CodeMirror-gutters {
        display: none;
    }

    #special_char,
    .char_block {
        display: inline-block;
    }
    .char_block.e-active {
        /* box-shadow: inset 3px 3px 7px 0px; */
        outline: 1.5px solid;
    }

    .char_block {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 5px 5px 0;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #DDDDDD;
        font-size: 20px;
        cursor: pointer;
        user-select: none;
    }

    #custom_tbar,
    #custom_tbar div{
        cursor: pointer;
    }


    #rteSection {
        height: 500px;
    }
  .e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
        content: "\e76e";
    }

    .e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
        content: "\e726";
    }

    .e-richtexteditor textarea.e-content {
      float: left;
    }
    .e-richtexteditor .e-rte-content {
      overflow: hidden;
    }
    .e-rte-content .e-content.e-pre-source{
      width: 100%;
    }

    .property-panel-content td{
        width: 50%;
    }
    .property-panel-content td div {
        padding-left: 10px;
        padding-top: 10px;
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

	.e-icon-btn .e-md-preview.e-icons::before {
		content: '\e345';
	}
    .e-icon-btn.e-active .e-md-preview::before,
    #mdCustom .e-icon-btn.e-active .e-md-preview.e-icons::before {
		content: '\e350';
	}
	#mdCustom .e-icon-btn .e-md-preview.e-icons::before {
		content: '\e345';
    }

    #rteDialog.e-dialog .e-dlg-content {
        padding: 0px 0px 5px 16px;
    }
    #custom_tbar .e-tbar-btn-text {
        font-size: 16px;
    }
    .e-bigger #custom_tbar .e-tbar-btn-text {
        font-size: 18px;
    }

    @media (min-width: 320px) and (max-width: 480px) {
        .fabric.e-bigger #rteDialog {
            min-width: 281px;
        }

        .fabric #rteDialog {
            min-width: 241px;
        }

        .bootstrap.e-bigger #rteDialog,
        .bootstrap #rteDialog {
            min-width: 223px;
        }

        .highcontrast.e-bigger #rteDialog {
            min-width: 283px;
        }
        .highcontrast #rteDialog {
            min-width: 243px;
        }
        .material #rteDialog {
            min-width: 224px;
        }
        .material.e-bigger #rteDialog {
            min-width: 236px;
        }
    }

</style>
</head>

<body>
    <app-root>
        <div id='loader'>Loading....</div>
    </app-root>
</body>

</html>

Retrieve the formatted content

To retrieve the editor contents, use the value property of RichTextEditor.

  let rteValue: string = this.rteObj.value;

Or, you can use the getHtml public method to retrieve the RichTextEditor content.

  let rteValue: string = this.rteObj.getHtml();

To fetch the RichTextEditor’s text content, use getText method.

  
  let rteValue: string = this.rteObj.contentModule.getText();