How to: Implement the Format Painter functionality

Dec 17, 2020
2 minutes to read

Currently, ASPxRichEdit doesn’t provide the Format Painter feature out of the box. This example illustrates a possible solution to implement this functionality in a custom way by using custom ribbon buttons and the ASPxRichEdit’s client-side API.

For this purpose, handle the editor’s client-side CustomCommandExecuted event to check if a custom ribbon item is clicked, and get the font and paragraph formatting applied to the currently selected content via the getState, getState commands.

To achieve the behavior similar to that the MS Word Format Painter’s provides, the ASPxRichEdit selection is changed programmatically to select only the selected text’s first symbol before calling corresponding commands in order to get its formatting as the formatting of the selected interval. After retrieving formatting information for this symbol, the control’s selection is restored to its original state.

After that, the saved formatting can be applied to the new selected content on a ribbon item click via the changeFontFormatting and changeParagraphFormatting commands.

function onCustomCommandExecuted(s, e) {
    if (e.commandName == 'Copy format') {
        var savedIntervals = richEdit.selection.intervals;
        richEdit.selection.intervals = [new ASPx.Interval(savedIntervals[0].start, 1)];
        fontFormatting = richEdit.commands.changeFontFormatting.getState().value;
        paragraphFormatting = richEdit.commands.changeParagraphFormatting.getState().value;
        richEdit.selection.intervals = savedIntervals;
    }
    else if (e.commandName == 'Paste format') {
        richEdit.commands.changeParagraphFormatting.execute(paragraphFormatting);
        richEdit.commands.changeFontFormatting.execute(fontFormatting);
    }
}

Default.aspx

aspx

<dx:ASPxRichEdit ID="ASPxRichEdit1" runat="server" WorkDirectory="~\App_Data\WorkDirectory" ClientInstanceName="richEdit">
    <Settings>
        <Behavior Save="Hidden" SaveAs="Hidden" Open="Hidden" />
    </Settings>
    <ClientSideEvents CustomCommandExecuted="onCustomCommandExecuted" />
</dx:ASPxRichEdit>

Default.aspx.cs
Default.aspx.vb

csharp

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack)
    {
        ASPxRichEdit1.Open(Server.MapPath("CharacterFormatting.rtf"));
    }

    ASPxRichEdit1.CreateDefaultRibbonTabs(true);

    var copyItem = new RibbonButtonItem("Copy format");
    copyItem.LargeImage.IconID = "edit_copy_32x32office2013";
    copyItem.Size = RibbonItemSize.Large;
    ASPxRichEdit1.RibbonTabs[1].Groups[1].Items.Add(copyItem);

    var pasteItem = new RibbonButtonItem("Paste format");
    pasteItem.LargeImage.IconID = "edit_paste_32x32office2013";
    pasteItem.Size = RibbonItemSize.Large;
    ASPxRichEdit1.RibbonTabs[1].Groups[1].Items.Add(pasteItem);
}

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If Not IsPostBack Then
        ASPxRichEdit1.Open(Server.MapPath("CharacterFormatting.rtf"))
    End If

    ASPxRichEdit1.CreateDefaultRibbonTabs(True)

    Dim copyItem = New RibbonButtonItem("Copy format")
    copyItem.LargeImage.IconID = "edit_copy_32x32office2013"
    copyItem.Size = RibbonItemSize.Large
    ASPxRichEdit1.RibbonTabs(1).Groups(1).Items.Add(copyItem)

    Dim pasteItem = New RibbonButtonItem("Paste format")
    pasteItem.LargeImage.IconID = "edit_paste_32x32office2013"
    pasteItem.Size = RibbonItemSize.Large
    ASPxRichEdit1.RibbonTabs(1).Groups(1).Items.Add(pasteItem)
End Sub