Text Formatting in the Angular Rich Text Editor

1 Sep 202524 minutes to read

The Angular Rich Text Editor provides a comprehensive set of tools to format and structure text, enabling users to create professional, well-organized content. This guide details the key styling features and their configuration options.

The Angular Rich Text Editor provides a comprehensive set of tools to format and structure text, enabling users to create professional, well-organized content. This guide details the key styling features and their configuration options.

Basic text styling

The Rich Text Editor offers essential text formatting options, including bold, italic, underline, strikethrough, subscript, superscript, inline code, and case conversion. These tools allow users to enhance text appearance and structure effortlessly, ensuring visually appealing and readable content.

Available text styles

The table below lists the available text styles in the Rich Text Editor’s toolbar, along with their initialization and HTML output.

Name Icons Summary Initialization  
Bold Bold icon Makes text thicker and darker toolbarSettings: { items: [‘Bold’]} <b>bold</b>
Italic Italic icon Slants text to the right toolbarSettings: { items: [‘Italic’]} <em>italic</em>
Underline Underline icon Adds a line beneath the text toolbarSettings: { items: [‘Underline’]}  
StrikeThrough StrikeThrough icon Applies a line through the text. toolbarSettings: { items: [‘StrikeThrough’]}  
InlineCode InlineCode icon Formats text as inline code toolbarSettings: { items: [‘InlineCode’]} <code>inline code</code>
SubScript SubScript icon Positions text slightly below the normal line toolbarSettings: { items: [‘SubScript’]}  
SuperScript SuperScript icon Positions text slightly above the normal line toolbarSettings: { items: [‘SuperScript’’]}  
LowerCase LowerCase icon Converts text to lowercase toolbarSettings: { items: [‘LowerCase’]}  
UpperCase UpperCase icon Converts text to uppercase toolbarSettings: { items: [‘UpperCase’’]}  

Refer to the sample below to configure these basic text styling options in the Rich Text Editor.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, HtmlEditorService, ToolbarSettingsModel, QuickToolbarService, TableService, PasteCleanupService, ImageService, LinkService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [(value)]='value'></ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService, ImageService, LinkService]
})
export class AppComponent {
    public value: string = "<p>The Rich Text Editor component is a 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>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</li><li>Capable of handling markdown editing.</li><li>Contains a modular library to load the necessary functionality on demand.</li><li>Provides a fully customizable toolbar.</li><li>Provides HTML view to edit the source directly for developers.</li><li>Supports third-party library integration.</li><li>Allows preview of modified content before saving it.</li><li>Handles images, hyperlinks, videos, uploads, etc.</li><li>Contains undo/redo manager.</li><li>Creates bulleted and numbered lists.</li></ul>";
    public tools: ToolbarSettingsModel = {
        items: ['Bold', 'Italic', 'Underline', 'SubScript', 'SuperScript', 'LowerCase', 'UpperCase', 'StrikeThrough']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Text alignments

The Rich Text Editor offers various text alignment options, including left, center, right, and justify. To utilize these alignment options, add the Alignments item to the items property in the toolbarSettings.

Important Note: Text alignment is applied to the entire block element containing the cursor or selected text, not just to the selected text itself. When you apply an alignment, it affects the whole paragraph or block, even if you’ve only selected a portion of the text.

The available alignment options are:

  • Align Left:
    To left-align your text, place the cursor in the desired paragraph or select any text within it, then click the Align Left icon in the toolbar. This will align the entire paragraph with the left margin.

  • Align Center:
    To center-align your text, place the cursor in the desired paragraph or select any text within it, then click the Align Center icon in the toolbar. This will center the entire paragraph within its container.

  • Align Right:
    To right-align your text, place the cursor in the desired paragraph or select any text within it, then click the Align Right icon in the toolbar. This will align the entire paragraph with the right margin.

  • Align Justify:
    To fully justify your text, place the cursor in the desired paragraph or select any text within it, then click the Align Justify icon in the toolbar. This will distribute the entire paragraph evenly across the line, aligning it with both the left and right margins.

Refer to the sample and code snippets below to configure these alignment options in the Rich Text Editor.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarSettingsModel, ToolbarService, HtmlEditorService, QuickToolbarService,  LinkService, ImageService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools'> </ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService, QuickToolbarService, LinkService, ImageService, TableService, PasteCleanupService]
})

export class AppComponent {
    public tools: ToolbarSettingsModel = {
        items: ['Alignments']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Lists and formatting

List formatting in the Rich Text Editor enables users to create structured ordered and unordered lists, improving content organization and readability. The component supports two main types of lists:

  1. Ordered Lists
  2. Unordered Lists

Ordered lists

Ordered lists display items in a specific sequence, with each item preceded by a number or letter. The Rich Text Editor provides two ways to create and manage ordered lists:

Using the ordered list tool

The OrderedList toolbar item offers a quick way to create or toggle a numbered list. To use it, select the desired text in the editor and click the OrderedList button in the toolbar. If the selected text is not already a numbered list, it will be converted into one. If it’s already a numbered list, clicking the button will remove the list formatting.

Number format list tool

For more detailed control over the numbering style, use the numberFormatList dropdown in the toolbar. Select the desired text in the editor, then choose the preferred format from the numberFormatList dropdown. The selected text will be transformed into a numbered list with the chosen style.

Available numbering styles:
  • None: Removes numbering while maintaining list structure and indentation
  • Number: Uses standard numeric sequencing (1, 2, 3, …)
  • Lower Roman: Employs lowercase Roman numerals (i, ii, iii, …)
  • Lowercase Greek: Utilizes lowercase Greek letters (α, β, γ, …)
  • Upper Alpha: Applies uppercase letters (A, B, C, …)
  • Lower Alpha: Uses lowercase letters (a, b, c, …)
  • Upper Roman: Employs uppercase Roman numerals (I, II, III, …)

You can customize the available number formats using the numberFormatList property of the Rich Text Editor.

The following example demonstrates how to customize the number format lists in the Rich Text Editor:

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools'>
               </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    public tools = { items: ['NumberFormatList'] };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Unordered lists

Unordered lists present items with visual markers, providing an effective way to list items without implying order or priority. The Rich Text Editor offers two methods for creating and managing unordered lists:

Using the unordered list tool

The UnorderedList toolbar item provides a fast way to create or toggle a bulleted list. To use it, select the desired text in the editor and click the UnorderedList button in the toolbar. If the selected text is not already a bulleted list, it will be converted into one. If it’s already a bulleted list, clicking the button will remove the list formatting.

Bullet format list tool

For more control over the bullet style, use the bulletFormatList dropdown in the toolbar. Select the desired text in the editor, then choose the preferred format from the bulletFormatList dropdown. The selected text will be transformed into a bullet list with the chosen style.

Available bullet styles
  • None: Removes bullet points while maintaining list structure and indentation
  • Disc: Displays solid circular bullets
  • Square: Uses solid square bullets
  • Circle: Presents hollow circular bullets

The following example demonstrates how to configure both ordered and unordered list formats in the Rich Text Editor.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools'>
               </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    public tools = { items: ['NumberFormatList'] };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Checklist

The Checklist feature lets you create interactive task lists with clickable checkboxes. You can configure checkbox behavior, customize the visual appearance, manage item states, and enable keyboard interactions. This makes it perfect for project management, note-taking, and task tracking within your content. You can easily toggle between checked and unchecked states, giving you an intuitive way to manage the completion status of your list items—making it a simple and effective TODO list solution.

Inserting a checklist

You can embed interactive task lists directly within the Rich Text Editor. Here’s how you can insert a Checklist:

  • Using the Toolbar: Click the Checklist button in the editor toolbar, usually represented by a checkbox icon.
  • Using the Shortcut: Press Ctrl+Shift+9 (or Cmd+Shift+9 on macOS) to insert a Checklist at your cursor’s position.
  • Converting Existing Lists: Select an existing bullet or numbered list and click the Checklist button to convert it into an interactive checklist.
  • Toggling Checklist Items: You can toggle the state of checklist items between checked and unchecked by clicking the checkbox. If you prefer using the keyboard, press Ctrl+Enter (or Cmd+Enter on macOS) to toggle the check marks based on your selection or cursor position in the editor.

Configuring Checklist

To enable the Checklist feature in your editor, add the Checklist toolbar item to the toolbarSettings.items property. This feature supports customizable behavior and can be easily integrated into your Rich Text Editor toolbar for quick access.

Below is an example of how to configure the Checklist in the Rich Text Editor:

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService, TableService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' ></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService, TableService]
})

export class AppComponent {

    public tools: ToolbarSettingsModel = {
        items: ['Checklist', 'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'Alignments', 'Blockquote', 'OrderedList',
            'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Increase and decrease indent

The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand.

The Rich Text Editor allows you to configure two types of indentation tools, Indent and Outdent tool in the Rich Text Editor toolbar using the toolbarSettings.items property.

Options Description
Indent Increases the indentation
Outdent Decreases the indentation

To adjust the text indentation:

  1. Select the text or paragraph.
  2. Click the Indent or Outdent button in the toolbar.
  3. The indentation of the selected text will be modified accordingly.

To configure the Indent and Outdent toolbar item, refer to the below code.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [(value)]='value'></ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService]
})

export class AppComponent {
    public value: string = "<p>The Rich Text Editor triggers events based on its actions. </p><p> The events can be used as an extension point to perform custom operations.</p><ul><li>created - Triggers when the component is rendered.</li><li>change - Triggers only when Rich Text Editor is blurred and changes are done to the content.</li><li>focus - Triggers when Rich Text Editor is focused in.</li><li>blur - Triggers when Rich Text Editor is focused out.</li><li>actionBegin - Triggers before command execution using toolbar items or executeCommand method.</li><li>actionComplete - Triggers after command execution using toolbar items or executeCommand method.</li><li>destroyed – Triggers when the component is destroyed.</li></ul>";
    public tools: ToolbarSettingsModel = {
        items: ['Outdent', 'Indent']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Indentation in lists

The Rich Text Editor provides powerful indentation features for both bullet and number format lists, allowing users to create nested lists and adjust list levels easily.

Increasing indent

To increase the indent of a list item:

  1. Select the list item you want to indent.
  2. Click the “Increase Indent” button in the toolbar or press Ctrl + ].
  3. The selected item will be indented, creating a nested list.

Decreasing indent

To decrease the indent of a list item:

  1. Select the indented list item.
  2. Click the “Decrease Indent” button in the toolbar or press Ctrl + [.
  3. The selected item will move back to the previous indentation level.

Using tab key for indentation

The Tab key provides a quick way to adjust list indentation:

  • Pressing Tab will increase the indent of the selected list item, creating a nested list.
  • Pressing Shift + Tab will decrease the indent of the selected list item, moving it to the previous level.

This behavior allows for efficient creation and management of multi-level lists without the need to use the toolbar buttons.

Heading formats

The Angular Rich Text Editor component provides a feature to format text with various heading styles, such as Heading 1, Heading 2, Heading 3, and Heading 4. These headings allow for structuring content hierarchically, improving readability, and organizing information effectively.

Built-in formats

To enable heading styles in your Rich Text Editor:

  1. Ensure the Formats item is included in the toolbar configuration.
  2. To apply a heading:
    • Select the desired text
    • Click the Formats dropdown in the toolbar
    • Choose the appropriate heading level (e.g., Heading 1, Heading 2)

This action will format the selected text with the chosen heading style, helping to create a clear document structure and emphasize important sections.

Below are examples and code snippets demonstrating how to integrate and utilize heading formatting options effectively in the Rich Text Editor.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarSettingsModel, ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [value]='value'>
   </ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService]
})
export class AppComponent {
    public value: string = "<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 &lt;IFRAME&gt; and &lt;DIV&gt; 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>Provides HTML view to edit the source directly for developers.</p></li><li><p>Supports third-party library integration.</p></li><li><p>Allows preview of modified content before saving it.</p></li><li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager.</p></li><li><p>Creates bulleted and numbered lists.</p></li></ul>";
    public tools: ToolbarSettingsModel = {
        items: ['Formats']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom format

The Rich Text Editor allows you to customize the format dropdown to include specific styles such as heading 1, heading 2, heading 3, heading 4, heading 5, heading 6, and paragraph.

To customize the format dropdown:

  1. Define a formats array in your component configuration.
  2. Specify each format option with a display name and corresponding value.

This customization enhances the editor’s functionality, enabling users to structure content with appropriate headings, improving readability and organization.

Below are examples demonstrating how to customize the format dropdown.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, ToolbarSettingsModel, FormatModel, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [format]='customFormats' [value]='value'>
    </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    public value: string = "<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 &lt;IFRAME&gt; and &lt;DIV&gt; 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>Provides HTML view to edit the source directly for developers.</p></li><li><p>Supports third-party library integration.</p></li><li><p>Allows preview of modified content before saving it.</p></li><li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager.</p></li><li><p>Creates bulleted and numbered lists.</p></li></ul>";
    public tools: ToolbarSettingsModel = {
        items: ['Formats']
    };

    public customFormats: FormatModel = {
        types: [
            { text: 'Paragraph', value: 'p' },
            { text: 'Heading 1', value: 'h1' },
            { text: 'Heading 2', value: 'h2' },
            { text: 'Heading 3', value: 'h3' },
            { text: 'Heading 4', value: 'h4' },
            { text: 'Heading 5', value: 'h5' },
            { text: 'Heading 6', value: 'h6' }
        ]
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Quotation formatting

The Rich Text Editor facilitates quotation formatting through the Blockquote tool available in the toolbar. Blockquotes are designed to visually highlight significant text, emphasizing key information or quotations by setting them apart from the main content for added emphasis and clarity.

To format text as a quotation, select the desired text and click on the Blockquote icon in the toolbar. The selected text will be formatted as a blockquote, typically indented and styled differently from the surrounding content.

Use the Blockquote tool in the editor below to see the feature in action.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [(value)]='value'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})

export class AppComponent {
    public value: string = "<blockquote><p>The Rich Text Editor component is a 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></blockquote><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; 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>Provides HTML view to edit the source directly for developers.</p></li><li><p>Supports third-party library integration.</p></li><li><p>Allows a preview of modified content before saving it.</p></li><li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager.</p></li><li><p>Creates bulleted and numbered lists.</p></li></ul>";
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

In a markdown editor, blockquotes are represented using the > symbol.

Horizontal line

The Rich Text Editor enables users to insert horizontal dividers using the HorizontalLine tool available in the toolbar. Horizontal lines (<hr>) help visually separate sections of content, enhancing readability and structural clarity.

To insert a horizontal line, place the cursor at the desired location and click the HorizontalLine icon in the toolbar. A full-width line will be added, creating a clear visual break between sections of text or other elements.

Use the HorizontalLine tool in the editor below to see the feature in action.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarSettingsModel, ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [value]='value'>
   </ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService]
})
export class AppComponent {
    public value: string = "<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 &lt;IFRAME&gt; and &lt;DIV&gt; 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>Provides HTML view to edit the source directly for developers.</p></li><li><p>Supports third-party library integration.</p></li><li><p>Allows preview of modified content before saving it.</p></li><li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager.</p></li><li><p>Creates bulleted and numbered lists.</p></li></ul>";
    public tools: ToolbarSettingsModel = {
        items: ['HorizontalLine', '|', 'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',
            'Blockquote', 'OrderedList', 'UnorderedList', '|', 'CreateLink',
            'Image', '|', 'SourceCode', 'Undo', 'Redo']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Format painter

The Format Painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the formatPainterSettings property.

Configuring format painter tool in the toolbar

You can add the FormatPainter tool in the Rich Text Editor using the toolbarSettings.items property.

To use the Format Painter feature, we need to import and configure the FormatPainterService in the provider section.

By double-clicking the format painter toolbar button, sticky mode will be enabled. In sticky mode, the format painter will be disabled when the user clicks the Escape key again.

The following example demonstrates how to configure the Format Painter tool.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService, FormatPainterService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor [toolbarSettings]='toolbarSettings' [(value)]='value'></ejs-richtexteditor>`,
    providers: [
        ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, FormatPainterService, TableService, PasteCleanupService],
})
export class AppComponent {
    public value: string = "<h3><strong>Format Painter</strong></h3><p>A Format Painter is a Rich Text Editor feature allowing users to quickly <span style=\"background-color: rgb(198, 140, 83);\"><strong>copy</strong></span> and <span style=\"background-color: rgb(198, 140, 83);\"><strong>paste</strong></span> formatting from one text to another. With a rich text editor, utilize the format painter as follows:</p><ul><li>Select the text whose format you want to copy.</li><li>Click on the <strong><em>Format Painter</em></strong> button in the toolbar. It may look like a paintbrush icon.</li><li>The cursor will change to a <strong>paintbrush</strong> icon. Click and drag the cursor over the text you want to apply the copied format.</li><li>Release the mouse button to apply the format.</li></ul><p>Using the format painter in a rich text editor can save you time when formatting a large document. You can quickly copy and apply formatting to <span style=\"background-color: rgb(198, 140, 83);\"><strong>multiple sections</strong></span>. It's a helpful tool for anyone who works with text editing regularly, such as writers, editors, and content creators.</p>";
    public toolbarSettings: ToolbarSettingsModel = {
        items: ['FormatPainter', 'ClearFormat', 'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'Blockquote',
            'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo']
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing copy and paste format

You can customize the Format Painter tool in the Rich Text Editor using the formatPainterSettings property.

The allowedFormats property helps you to specify tag names that allow the formats to be copied from the selected text. For instance, you can include formats from the selected text using tags like p; h1; h2; h3; div; ul; ol; li; span; strong; em; code;. The following example demonstrates how to customize this functionality.

Similarly, with the deniedFormats property, you can utilize the selectors to prevent specific formats from being pasted onto the selected text. The table below illustrates the selectors and their respective usage.

Type Description Selector Usage
() Class Selector h3(e-rte-block-blue-text) The class name e-rte-block-blue-text of H3 element is not copied.
[] Attribute Selector span[title] The title attribute of span element is not copied.
{} Style Selector span{background-color, color} The background-color and color styles of span element is not copied.

Using the deniedFormats property following styles are denied copying from the selected text such as h3(e-rte-block-blue-text){background-color,padding}[title]; li{color}; span(e-inline-text-highlight)[title]; strong{color}(e-rte-strong-bg).

The following example illustrates how to configure allowedFormats and deniedFormats.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService, FormatPainterService, ToolbarSettingsModel, FormatPainterSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor [toolbarSettings]='toolbarSettings' [formatPainterSettings]='formatPainterSettings' [(value)]='value'></ejs-richtexteditor>`,
    providers: [
        ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, FormatPainterService, TableService, PasteCleanupService],
})
export class AppComponent {
    public value: string = "<h3><strong>Format Painter</strong></h3><p>A Format Painter is a Rich Text Editor feature allowing users to quickly <span style=\"background-color: rgb(198, 140, 83);\"><strong>copy</strong></span> and <span style=\"background-color: rgb(198, 140, 83);\"><strong>paste</strong></span> formatting from one text to another. With a rich text editor, utilize the format painter as follows:</p><ul><li>Select the text whose format you want to copy.</li><li>Click on the <strong><em>Format Painter</em></strong> button in the toolbar. It may look like a paintbrush icon.</li><li>The cursor will change to a <strong>paintbrush</strong> icon. Click and drag the cursor over the text you want to apply the copied format.</li><li>Release the mouse button to apply the format.</li></ul><p>Using the format painter in a rich text editor can save you time when formatting a large document. You can quickly copy and apply formatting to <span style=\"background-color: rgb(198, 140, 83);\"><strong>multiple sections</strong></span>. It's a helpful tool for anyone who works with text editing regularly, such as writers, editors, and content creators.</p>";
    public toolbarSettings: ToolbarSettingsModel = {
        items: ['FormatPainter', 'ClearFormat', 'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'Blockquote',
            'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo']
    }
    public formatPainterSettings: FormatPainterSettingsModel = {
        allowedFormats: 'p;h1;h2;h3;div;ul;ol;li;span;strong;em;code;',
        deniedFormats: 'h3(e-rte-block-blue-text){background-color,padding,color}[title]; li{color}; span(e-inline-text-highlight){color}[title]; strong{color}(e-rte-strong-bg);',
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Shortcut keys for copy and paste format

For more details on keyboard navigation, refer to the Keyboard support documentation.

The format painter retains the formatting after application making it possible to apply the same formatting multiple times by using the Alt + Shift + v keyboard shortcut.

Additionally, You can perform the format painter actions programmatically using the executeCommand public method.

Clear formatting

The Angular Rich Text Editor component offers a powerful Clear Format feature to remove any applied formatting from selected text.

This feature is particularly useful when you need to:

  • Remove multiple styles at once
  • Quickly standardize text formatting
  • Prepare text for new styling

Configuring clear format

To enable the ClearFormat feature in your Rich Text Editor, you need to add it to the toolbar items. Follow these steps:

  1. Open your component file where you’ve implemented the Rich Text Editor.
  2. Locate the toolbarSettings property in your Rich Text Editor configuration.
  3. Add 'ClearFormat' to the items array within toolbarSettings.

Here’s an example of how to configure the Clear Format feature:

@Component({
    selector: 'app-root',
    template: `<ejs-richtexteditor [toolbarSettings]="tools"></ejs-richtexteditor>`
})
export class AppComponent {
    public tools: object = {
        items: 
        [
            "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", "UnorderedList", "|",
            "CreateLink", "Image", "|", "SourceCode", "ClearFormat", "|", "Undo", "Redo"
        ]
    };
}

Using clear format

Once configured, you can use the Clear Format feature as follows:

  1. Select the text with formatting you want to remove.
  2. Click the Clear Format button in the toolbar.
  3. The selected text will revert to its original, unformatted state.

Using Clear Format makes it easy to undo styling changes and keep your text looking consistent. Examples and code snippets below show how to use ‘Clear Format’ effectively in the Rich Text Editor.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarSettingsModel, ToolbarService, HtmlEditorService, QuickToolbarService, LinkService, ImageService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [value]='value'>
   </ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService, QuickToolbarService, LinkService, ImageService, TableService, PasteCleanupService]
})

export class AppComponent {
    public value: string = "<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 &lt;IFRAME&gt; and &lt;DIV&gt; 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>Provides HTML view to edit the source directly for developers.</p></li><li><p>Supports third-party library integration.</p></li><li><p>Allows preview of modified content before saving it.</p></li><li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager.</p></li><li><p>Creates bulleted and numbered lists.</p></li></ul>";
    public tools: ToolbarSettingsModel = {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough', 'SuperScript', 'SubScript', '|',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
            'LowerCase', 'UpperCase', '|',
            'Formats', 'Alignments', 'Blockquote', '|', 'NumberFormatList', 'BulletFormatList', '|',
            'Outdent', 'Indent', '|', 'FormatPainter', 'ClearFormat',
            '|', 'FullScreen']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));