Format Painter in EJ2 TypeScript Rich Text Editor control

5 Mar 202517 minutes to read

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.

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

Rich Text Editor features are segregated into individual feature-wise modules. To use the Format Painter feature, we need to import and inject the FormatPainter module using the RichTextEditor.Inject(FormatPainter).

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.

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

let formatPainterRTE: RichTextEditor = new RichTextEditor({
    toolbarSettings: {
        items: ['FormatPainter', 'ClearFormat', 'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',
        'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo']
    },
    value:`<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>`,
});

formatPainterRTE.appendTo('#formatPainterRTE');
<!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.1.33/ej2-base/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/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='formatPainterRTE'></div>
        </div>
    </body>
</html>

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.

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

let formatPainterRTE: RichTextEditor = new RichTextEditor({
    toolbarSettings: {
        items: ['FormatPainter', 'ClearFormat', 'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',
        'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo']
    },
    formatPainterSettings: {
        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);',
    },
    value:`<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>`,
});

formatPainterRTE.appendTo('#formatPainterRTE');
<!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.1.33/ej2-base/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
        <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-richtexteditor/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='formatPainterRTE'></div>
        </div>
    </body>
</html>

Using Shortcut Keys for Copy and Paste Format

You can use the following shortcut keys to copy and paste the format in the Rich Text Editor.

Actions	Keyboard shortcuts	Description
Copy the format	`Alt` + `Shift` + `c`	Copy the selection format or current range.
Pate the format	`Alt` + `Shift` + `v`	Paint the copied format.
Escape	`Esc`	Remove the previously copied format and disable the sticky mode.

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.

Format Painter in EJ2 TypeScript Rich Text Editor control

Configuring Format Painter Tool in the Toolbar

Customizing Copy and Paste Format

Using Shortcut Keys for Copy and Paste Format

See Also