Modules in Angular Rich Text Editor

21 Aug 20257 minutes to read

The Angular Rich Text Editor employs a modular architecture, allowing selective inclusion of features to optimize performance and customize functionality. This approach reduces bundle size and enhances flexibility for developers adapting the editor to specific use cases.

What are modules in Angular Rich Text Editor?

Modules in the Angular Rich Text Editor are self-contained features that can be enabled or disabled based on application requirements. These modules, available in the @syncfusion/ej2-angular-richtexteditor package, can be injected to extend and enhance the editor’s functionality.

For example, modules such as Toolbar, Link, Image, HtmlEditor, and QuickToolbar enable specific tools and behavior in the Rich Text Editor interface.

How to import and inject modules

To utilize a module, in the Angular Rich Text Editor, you must:

  • Import the required module from the @syncfusion/ej2-angular-richtexteditor package

  • Inject it using the providers array in the @Component decorator.

The following example demonstrates importing and injecting key modules:

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [
            RichTextEditorAllModule,
        ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='defaultRTE' [value]="value" [toolbarSettings]='tools'></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 value: string = `<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul>
    <li>
        <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p>
    </li>
    <li>
        <p>Bulleted and numbered lists.</p>
    </li>
    <li>
        <p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p>
    </li>
    <li>
        <p>Contains undo/redo manager. </p>
    </li>
    </ul><div style="display: inline-block; width: 60%; vertical-align: top; cursor: auto;"><img alt="Sky with sun" src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png" width="309" style="min-width: 10px; min-height: 10px; width: 309px; height: 174px;" class="e-rte-image e-imginline e-rte-drag-image" height="174" /></div>  `;

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Available modules in Rich Text Editor

The following table lists available modules, grouped by functionality, with their descriptions:

Module Description
ToolbarService Inject this module to enable the toolbar to access text formatting and Rich Text Editor features like bold, italic, font settings, and alignment tools.
LinkService Inject this module to insert, edit, and remove hyperlinks within the content.
ImageService Inject this module to insert and manage images in the Rich Text Editor.
TableService Inject this module for inserting and editing HTML tables in the Rich Text Editor.
CountService Inject this module to enable live character counting capabilities in the Rich Text Editor.
HtmlEditorService Inject this module to support the HTML source editing view, allowing users to switch between preview and source code modes.
MarkdownEditorService Inject this module to enable editing support, allowing users to write and preview content using standard Markdown syntax
QuickToolbarService Inject this module to displays a floating toolbar near selected content like images or links for quick actions.
ResizeService Injecting this module enables users to resize the height and width of the editor area interactively using a resizable handle in the Rich Text Editor.
FileManagerService Injecting this module provides users with a dialog interface to browse, upload, and insert files (especially images) from a server or cloud storage provider directly into the Rich Text Editor.
PasteCleanupService Inject this module to keep or clean up the formatting of pasted content in Rich Text Editor.
FormatPainterService Injecting this module allows users to copy formatting (like bold, italic, font size, color, etc.) from one section of text and apply it to another in the Rich Text Editor.
EmojiPickerService Injecting this module allows users to search, and insert emojis into the Rich Text Editor.
SlashMenuService Injecting this module allows users to apply formats, open dialogs by typing “/” in the Rich Text Editor.
ImportExportService Injecting this module allows users to import content from Word documents into the Rich Text Editor and export the Rich Text Editor’s content into Word and PDF files
CodeBlockService Injecting this module allows users to format the selected text as inline code, highlighting code snippets within the text in the Rich Text Editor.
AudioService Injecting this module allows users to insert and manage audios in the Rich Text Editor.
VideoService Injecting this module allows users to insert and manage videos in the Rich Text Editor.

These modules should be injected into the providers section of root NgModule or component class.