Format Painter

23 Jun 20257 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 via keyboard shortcuts, allowing the transfer of styles from individual words to entire paragraphs. Customization options are available through the RichTextEditorFormatPainterSettings property.

Configuring format painter tool in toolbar

You can add the FormatPainter tool in the Rich Text Editor using the RichTextEditorToolbarSettings.Items property.

By double-clicking the format painter toolbar button, sticky mode will be enabled. In sticky mode, the format painter remains active until the Escape key is pressed again to disable it.

The following code example shows how to add the format painter tool in the Rich Text Editor.

RAZOR

@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor @bind-Value="@EditorContent">
    <RichTextEditorToolbarSettings Items="@Tools" />
</SfRichTextEditor>
@code {
    private string EditorContent = @"<h3>Format Painter in Rich Text Editor</h3><p>The <strong data-start=""50"" data-end=""68"">Format Painter</strong> allows you to quickly copy and apply text formatting within the editor, saving time and ensuring consistency.</p><h5>How to Use Format Painter?</h5>
    <ul>
        <li><strong>Select the text</strong> with the formatting you want to copy.</li>
        <li>Click the <strong>Format Painter</strong> button (paintbrush icon) in the toolbar.</li>
        <li>The cursor changes to a <strong>paintbrush</strong> icon.</li>
        <li><strong>Click and drag</strong> over the text where you want to apply the copied format.</li>
        <li>Release the mouse button, and the formatting will be applied.</li>
    </ul>
    <h5>Why Use Format Painter?</h5>
    <ul>
        <li><strong>Saves time</strong> when formatting large documents.</li>
        <li><strong>Ensures consistency</strong> in text styles.</li>
        <li><strong>Easy to use</strong> for writers, editors, and content creators.</li>
    </ul>";
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.FormatPainter },
        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo },
        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }
    };
}

Customizing copy and paste format

You can customize the format painter tool in the Rich Text Editor using the RichTextEditorFormatPainterSettings 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.

RAZOR

@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor  @bind-Value="@EditorContent">
    <RichTextEditorToolbarSettings Items="@Tools" />
    <RichTextEditorFormatPainterSettings 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);" />
</SfRichTextEditor>
@code {
    private string EditorContent = @"<h3>Format Painter in Rich Text Editor</h3><p>The <strong data-start=""50"" data-end=""68"">Format Painter</strong> allows you to quickly copy and apply text formatting within the editor, saving time and ensuring consistency.</p><h5>How to Use Format Painter?</h5>
    <ul>
        <li><strong>Select the text</strong> with the formatting you want to copy.</li>
        <li>Click the <strong>Format Painter</strong> button (paintbrush icon) in the toolbar.</li>
        <li>The cursor changes to a <strong>paintbrush</strong> icon.</li>
        <li><strong>Click and drag</strong> over the text where you want to apply the copied format.</li>
        <li>Release the mouse button, and the formatting will be applied.</li>
    </ul>
    <h5>Why Use Format Painter?</h5>
    <ul>
        <li><strong>Saves time</strong> when formatting large documents.</li>
        <li><strong>Ensures consistency</strong> in text styles.</li>
        <li><strong>Easy to use</strong> for writers, editors, and content creators.</li>
    </ul>";
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.FormatPainter },
        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo },
        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }
    };
}

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 ExecuteCommandAsync public method.