How to: Implement the Format Painter functionality
- 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);
}
}
<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>
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);
}