Angular Rich Text Editor | Angular Markdown Editor

The Angular RichTextEditor is a feature-rich WYSIWYG HTML editor and Markdown editor. The Rich Text Editor is widely used to create blogs, forum posts, notes sections, comment sections, messaging applications, and more. The component provides an efficient user interface for a better editing experience with mobile support. It has a variety of tools to edit and format rich content, and it return a valid HTML markup or Markdown (MD) content. It allows users to insert images, links, tables, media files and lists with modular architectures.

⚡️ Quick Start

Syncfusion ® Rich Text Editor is easy to integrate into Angular applications. Just install the package, configure the module, and drop the component into your template.

🛠️ Installation

Install the Rich Text Editor and its dependencies using npm:

npm install @syncfusion/ej2-angular-richtexteditor --save

This command will:

• Adds @syncfusion/ej2-angular-richtexteditor package and its peer dependencies to your package.json file.
• Registers the Syncfusion® UI default theme (tailwind) in the angular.json file.

⚙️ Setup

1. Create an Angular Application

You can use Angular CLI to setup your Angular applications. To install the Angular CLI, use the following command.

npm install -g @angular/cli
ng new my-app
cd my-app

2. Import the Rich Text Editor Module

In app.module.ts, import the required module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RichTextEditorAllModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

🧩 Add the Rich Text Editor Component

In src/app/app.component.ts, use <ejs-richtexteditor> selector in template attribute of @Component directive to render the Syncfusion® Angular Rich Text Editor component.

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>Start editing your content here.</p>
                    </ng-template>
                </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent { }

🛠️ Supported frameworks

Rich Text Editor component is also offered in following list of frameworks.

|      JavaScript     |        React       |        Vue          |   ASP.NET Core   |   ASP.NET MVC   | | :-----: | :-----: | :-----: | :-----: | :-----: |

🏗️ Showcase samples

• Angular HTML editor demo
• Blog posting using angular rich text editor demo
• Angular Markdown editor demo
• Angular live HTML editor demo

✨ Key features

• AI Assistant - The AI Assistant helps generate, rewrite, summarize, and refine editor content. It is designed to speed up content creation and improve editing productivity.

• Paste from MS Word - Paste from MS Word brings content into the editor with formatting cleanup and structure preservation. It helps users reuse Word content without carrying over unwanted styles.

• IFrame - IFrame mode renders the editor content inside an isolated document context. It helps improve style encapsulation and reduces interference from external page styles.

• @Mentions - Mentions let users tag people, topics, or items with an autocomplete suggestion list. They make collaboration and inline referencing faster and more accurate.

• Slash Menu - Slash menu support lets users trigger editor commands by typing a forward slash. It provides a quick way to insert content blocks and formatting actions.

• Checklist - Checklist support enables users to create interactive task lists in the editor. It is useful for organizing work items and tracking progress within content.

• Accessibility & WCAG 2.0 Compliance - Accessibility support helps the editor work with assistive technologies and keyboard navigation. It ensures the component can be used more effectively by a broader audience.

• Preventing Cross-Site Scripting (XSS) - XSS protection helps validate and sanitize editor content before it is used or rendered. It reduces security risks by blocking malicious scripts and unsafe markup.

• HTML code editing - HTML code editing lets users view and edit the underlying markup directly. It is helpful when precise control over the document structure is required.

• Markdown editor - Markdown editor mode lets users create and edit content using Markdown syntax. It is ideal for lightweight authoring and text-based workflows.

• Custom Toolbar Items - Custom toolbar items allow additional actions to be added to the editor toolbar. They help tailor the editing experience to specific application needs.

• Quick Toolbar - Quick Toolbar shows contextual actions for selected content such as text, images, and tables. It helps users apply common operations without leaving the editing area.

• File Browser - File Browser integration allows users to browse and select files within editor workflows. It supports file-based content management in a more seamless way.

• Emoji Picker - Emoji picker support lets users insert emojis into the editor content. It helps make messages and content more expressive and engaging.

• Insert Media - Insert Media allows audio and video content to be embedded in the editor. It is useful for creating richer and more interactive documents.

• Toolbar - Toolbar support provides editing controls and customization options for the editor. It supports floating behavior, multiple layout types, and toolbar positioning for flexible UI setups.

• Export and Import - Export and Import support allows content to be moved between the editor and document formats such as PDF and Word. It simplifies content sharing, archiving, and document processing.

• Undo and redo - Undo and redo support lets users reverse or repeat recent editing actions. It improves editing confidence by making changes easier to correct.

• Module injection - Module injection lets the editor load only the features that are needed. It helps reduce bundle size and keeps the component more efficient.

• Third-party integration - Third-party integration lets the editor work with external libraries and services. It extends the editor with additional capabilities beyond the built-in feature set.

📚 Resources

• Documentation
• Theme Studio
• What's New
• Road Map
• E-Books

🤝 Support

Product support is available through the following mediums.

• Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
• Community forum
• GitHub issues
• Request feature or report bug
• Live chat

🔄 Change log

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

⚖️ License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® EULA. To acquire a license for 140+ Angular UI components, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

© Copyright 2026 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.