Format Painter in ASP.NET CORE Rich Text Editor Control | Syncfusion

22 Jun 202311 minutes to read

A format painter is a tool that allows you to copy the formatting from a piece of text and apply it to another one. Format Painter can be accessed via the toolbar or the keyboard shortcuts. The format painter can copy the formatting of a single word or a whole paragraph. The format painter can be customized using the formatPainterSettings property.

Enabling the toolbar option for Format Painter

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

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.

<ejs-richtexteditor id="formatPainterRTE">
    <e-richtexteditor-toolbarsettings items="ViewBag.items"/>
      <e-content-template>
            <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>
      </e-content-template>
</ejs-richtexteditor>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.items = new[] { "FormatPainter", "ClearFormat", "Bold", "Italic", "Underline", "|",
            "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image","|",
            "SourceCode", "Undo", "Redo"};
        return View();
    }
}

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

<ejs-richtexteditor id="formatPainterRTE">
    <e-richtexteditor-toolbarsettings items="@ViewBag.items"/>
    <e-richtexteditor-formatpaintersettings allowedFormats="@ViewBag.allowedFormats" deniedFormats="@ViewBag.deniedFormats"/>
      <e-content-template>
        <h3 class="e-rte-block-blue-text" title="Format Painter" style="color: #0079f3; background-color: #eff6ff; padding: 10px;"><strong>Format Painter</strong></h3>
        <p>
            A Format Painter is a Rich Text Editor feature allowing users to quickly
            <span class="e-inline-text-highlight" style="color: blue;" title="Styled by CSS Class selector"><strong>copy</strong></span>
            and
            <span class="e-inline-text-highlight" style="color: blue;" title="Styled by CSS Class selector"><strong>paste</strong></span>
            formatting from one text to another. With a rich text editor, utilize the format painter as follows:
        </p>
        <ul>
            <li style="color: crimson;">
                Select the text whose format you want to copy.
            </li>
            <li style="color: crimson;">
                Click on the <strong><em>Format Painter</em></strong> button in the toolbar. It may look like a paintbrush icon.
            </li>
            <li style="color: crimson;">
                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 style="color: crimson;">
                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 <strong class="e-rte-strong-bg" style="color: blue">multiple sections</strong>.
            It's a helpful tool for anyone who works with text editing regularly, such as writers, editors, and content creators.
        </p>
      </e-content-template>
</ejs-richtexteditor>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.items = new[] { "FormatPainter", "ClearFormat", "Bold", "Italic", "Underline", "|",
            "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image","|",
            "SourceCode", "Undo", "Redo"};
        ViewBag.allowedFormats = "p;h1;h2;h3;div;ul;ol;li;span;strong;em;code;";
        ViewBag.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);";
        return View();
    }
}

Using the shortcut key to copy and paste the 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.