Module in EJ2 TypeScript Rich Text Editor control

16 May 20256 minutes to read

The 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 Rich Text Editor?

In the 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-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 Rich Text Editor, you must:

  • Import the required module from the Syncfusion package.

  • Inject it using the RichTextEditor.Inject method.

The following example demonstrates how to import and inject modules.

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor);

// initialize RichTextEditor component
let editor: RichTextEditor = new RichTextEditor({
    value: `<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.Users can format their content using standard toolbar commands.</p>
    <p><b>Key features:</b></p>
    <ul><li><p>Provides <b>IFRAME</b> and <b>DIV</b> modes</p></li>
    <li><p>Capable of handling markdown editing.</p></li>
    <li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
    <li><p>Provides a fully customizable toolbar.</p></li>
    <li><p>Supports third-party library integration.</p></li>
    </ul>`
});
// render initialized Rich Text Editor
editor.appendTo('#editor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
     <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='editor'></div>
    </div>
    <style>
        .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
            content: "\e76e";
        }
    
        .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
            content: "\e726";
        }
    </style>
</body>

</html>

Available modules in Rich Text Editor

Module Description
Toolbar Inject this module to enable the toolbar to access text formatting and Rich Text Editor features like bold, italic, font settings, and alignment tools.
Link Inject this module to insert, edit, and remove hyperlinks within the content.
Image Inject this module to insert and manage images in the Rich Text Editor.
Table Inject this module for inserting and editing HTML tables in the Rich Text Editor.
Count Inject this module to enable live character counting capabilities in the Rich Text Editor.
HtmlEditor Inject this module to support the HTML source editing view, allowing users to switch between preview and source code modes.
MarkdownEditor Inject this module to enable editing support, allowing users to write and preview content using standard Markdown syntax
QuickToolbar Inject this module to displays a floating toolbar near selected content like images or links for quick actions.
Resize 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.
FileManager 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.
PasteCleanup Inject this module to keep or clean up the formatting of pasted content in Rich Text Editor.
FormatPainter 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.
EmojiPicker Injecting this module allows users to search, and insert emojis into the Rich Text Editor.

These modules should be injected into the richtexteditor using the RichTextEditor.Inject method.