Format Painter in Blazor Rich Text Editor

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.

How to add format painter tool to the toolbar

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

Double-clicking the Format Painter toolbar button enables sticky mode, which keeps the format painter active so you can apply the copied formatting to multiple selections. Press the Escape key to exit sticky mode.

The following example demonstrates how to add the Format Painter tool to the Blazor Rich Text Editor toolbar.

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

Users can customize the behavior of the Format Painter tool 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 the H3 element is not copied.
[]	Attribute Selector	span[title]	The title attribute of the span element is not copied.
{}	Style Selector	span{background-color, color}	The background-color and color styles of the span element are 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 formatting after application in sticky mode, allowing you to apply the same styles multiple times by using the Alt + Shift + v keyboard shortcut.

Additionally, users can perform the format painter actions programmatically using the ExecuteCommandAsync public method.