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

4 Mar 202510 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.

Configuring Format Painter Tool in the Toolbar

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.

@Html.EJS().RichTextEditor("formatPainterRTE").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
public class HomeController : Controller
{

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

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.

@Html.EJS().RichTextEditor("formatPainterRTE").ToolbarSettings(e => e.Items((object)ViewBag.items)).FormatPainterSettings(e => {e.AllowedFormats((string)ViewBag.allowedFormats);e.DeniedFormats((string)ViewBag.deniedFormats);}).Value(ViewBag.value).Render()
public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.value = @"<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>";
        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 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.