Module in Angular Rich Text Editor component

17 May 20256 minutes to read

The Angular Rich Text Editor component follows a modular architecture, enabling users to include or exclude features as needed to ensure optimal performance and customization.

What is a module in Angular Rich Text Editor?

In the Angular Rich Text Editor, a module refers to a self-contained feature or functionality that can be selectively enabled or disabled. These modules are provided as part of the @syncfusion/ej2-angular-richtexteditor package and can be injected to extend the editor’s capabilities.

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 use a module in the Angular Rich Text Editor, you must:

  • Import the required module from the Syncfusion package.

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

The following example demonstrates how to import and inject 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

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.

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