Text Formatting and Structure in the Angular Rich Text Editor Component

17 May 202524 minutes to read

Basic text styling

The Rich Text Editor’s basic styles feature provides essential formatting options, including bold, italic, underline, strikethrough, subscript, superscript, and case changes. These fundamental tools enable users to enhance and customize their text effortlessly. By leveraging these options, users can ensure their content is both visually appealing and well-structured.

Available text styles

The table below lists the available text styles in the Rich Text Editor’s toolbar.

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’’]}  

Please refer to the sample below to add 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.

Here are the available alignment options:

  • 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.

Please refer to the sample and code snippets below to add 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));

Number and bullet format list

List formatting in the Rich Text Editor allows users to organize content into structured lists, enhancing readability and visual presentation. The component supports two main types of lists:

  1. Ordered Lists
  2. Unordered Lists

Ordered lists

Ordered lists present 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 customize the bullet 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));

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 desired 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.

Insert code

The Angular Rich Text Editor component offers a powerful feature to format text as preformatted code blocks, making it ideal for displaying programming snippets or structured contents.

Enabling code block formatting

To enable code block formatting, ensure that the Formats item is included in the toolbar items of your Rich Text Editor configuration.

Below are examples and code snippets demonstrating how to add and effectively use the code block formatting option 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: ['Formats']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Applying code block formatting

Follow these steps to format text as a code block:

  1. Select the desired text in the editor.
  2. Click on the Formats dropdown in the toolbar.
  3. Choose Preformatted from the dropdown menu.

Exiting code block format

To exit the code block format:

  1. Place the cursor at the end of your code block content.
  2. Press the Enter key twice.

This action will move the cursor out of the code block and return to normal text formatting.

Enhancing code block appearance

To make your code blocks more visually appealing, you can add custom styling. Here’s an example of how to style your <pre> tag:

<style>

.e-richtexteditor .e-rte-content .e-content pre{
                background-color: #f4f4f4; color: #333; font-family: 'Courier New', Courier, monospace; font-size: 14px; padding: 15px; border-radius: 5px; border: 1px solid #ccc; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;
            }

</style>

This styling adds a light gray background, sets a monospace font, and includes padding and borders for better visual separation.

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 code example shows how to add the format painter tool in the Rich Text Editor.

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).

Below is an example illustrating how to define the allowedFormats and deniedFormats settings for the Format Painter in the Rich Text Editor.

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 Clear Format 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));