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 changeFontFormatting.getState(), changeParagraphFormatting.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.
using DevExpress.Web;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
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);
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="DevExpress.Web.ASPxRichEdit.v17.2, Version=17.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxRichEdit" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v17.2, Version=17.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
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);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<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>
</form>
</body>
</html>
Option Infer On
Imports DevExpress.Web
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Partial Public Class _Default
Inherits System.Web.UI.Page
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
End Class
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register assembly="DevExpress.Web.ASPxRichEdit.v17.2, Version=17.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxRichEdit" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v17.2, Version=17.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
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);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<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>
</form>
</body>
</html>