Getting Started with Angular Rich Text Editor

6 Aug 20267 minutes to read

The Syncfusion Angular Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that enables users to create, edit, and format rich text content with features like multimedia insertion, lists, and links. This section describes how to create a basic Angular Rich Text Editor component and configure its core features.

Ready to streamline your Syncfusion® Angular development? Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistant

To get started quickly with the Angular Rich Text Editor using CLI and Schematics, refer to this video tutorial:

Prerequisites

Install the Syncfusion CLI

Install the Syncfusion CLI globally using the following command:

npm install -g @syncfusion/syncfusion-cli

Create a new Angular application using Syncfusion CLI

You can create a Angular application using the Syncfusion CLI. The CLI provides two ways to create a project:

Non-interactive mode

Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments.

sf new syncfusion-angular-app --framework angular --template rich-text-editor

In this mode, the project configuration is passed directly in the command. The above command creates a Angular application configured with the Syncfusion® Rich Text Editor component.

Interactive mode

Interactive mode guides you through the project creation process with step-by-step prompts.

sf

When you run the sf command, the CLI prompts you to select the required project configuration. To create a Angular application with the Syncfusion® Rich Text Editor component, select the following options:

√ Project name? ... syncfusion-angular-app
√ Choose Framework: » Angular
√ Choose Template: » Rich Text Editor
√ Choose Theme: » Material3
√ Choose Style Format: » CSS
√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no
√ Install dependencies and start app now? ... no

The above selections generate a Angular application configured with the Syncfusion® Rich Text Editor component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements.

The Syncfusion® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements.

Run the project

Once the project is created, navigate to the project directory and run the following commands in your terminal.

cd syncfusion-angular-app
npm install
ng serve

The output will appear as follows:

Rich Text Component

Prerequisites

This guide uses the Angular CLI to manage Angular applications. It requires Node 24.13.0 or higher. For more information about Angular CLI and its features, refer the Angular CLI.

NOTE

For information about supported Angular versions and Syncfusion package compatibility, refer to the Version Compatibility documentation.

Setup Angular Environment

You can use Angular CLI to set up your Angular applications. To install Angular CLI use the following command.

npm install -g @angular/cli

Create an Angular Application

Create a new Angular application using the following Angular CLI command:

ng new my-app

This command will prompt you for a few settings for the new project, such as which stylesheet format to use.

Initial_setup

By default, the Angular CLI creates a CSS-based application.

Then the CLI also displays an additional prompt asking whether to enable Server‑Side Rendering (SSR) and Static Site Generation (SSG), as shown below:

Server_Side_Rendering_Setup

For this setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Then the CLI displays another prompt related to AI tooling support, as shown below:

AI_Tool_Setup

Any preferred option can be selected based on the development workflow or project needs.

Next, navigate to the project folder:

cd my-app

Adding Syncfusion Rich Text Editor package

All available Essential JS 2 packages are published in the npmjs.com registry. Install the Rich Text Editor component with the following command:

npm install @syncfusion/ej2-angular-richtexteditor

Adding CSS reference

Syncfusion provides multiple themes for the Rich Text Editor component. For a complete list of available themes, refer to the themes packages.

To apply the Material 3 theme, install the corresponding theme package by using the following command:

npm install @syncfusion/ej2-material3-theme

The installed theme package includes an index.css file that automatically imports all the required dependency styles. Import the following stylesheet into src/styles.css.

@import '../node_modules/@syncfusion/ej2-material3-theme/styles/rich-text-editor/index.css';

Module Injection

The following modules are used to utilize the basic capabilities of the Rich Text Editor:

  • HtmlEditorService - Inject this module to use the Rich Text Editor as HTML editor.
  • ImageService - Inject this module to use the image feature in Rich Text Editor.
  • LinkService - Inject this module to use the link feature in Rich Text Editor.
  • QuickToolbarService - Inject this module to use the quick toolbar feature for the target element.
  • ToolbarService - Inject this module to use the Toolbar feature.

These modules can be injected as services through the component’s providers array, as demonstrated in the following example.

import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
  imports: [ RichTextEditorModule ],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor></ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService]
})
export class App {
}

TIPS

Additional feature modules are available here.

Adding Rich Text Editor component

Modify the template in the src/app/app.ts file to render the Rich Text Editor component. Add the Angular Rich Text Editor by using the <ejs-richtexteditor> selector in the template section of the app.ts file.

import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
  imports: [ RichTextEditorModule ],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor></ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService]
})
export class App {
}
@import '../node_modules/@syncfusion/ej2-material3-theme/styles/rich-text-editor/index.css';

Run the Application

Use the following command to run the application in the browser.

ng serve --open

The Syncfusion® Angular Rich Text Editor is displayed in the browser as shown below.

Syncfusion Angular Rich Text Editor output

See Also

Documentation links

Live samples