- What is a module in Angular Rich Text Editor?
- How to import and inject modules
- Available modules in Rich Text Editor
Contact Support
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 <IFRAME> and <DIV> 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.