Editor - Format Painter

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can use the FormatPainter tool to copy formatting from piece of text and apply it to others in the content area of RadEditor. The tool is very similar to the FormatPainter of MS Word ®, and is quite useful and time saving when needed to apply identical formatting to multiple sections of the edited content.

How it Works

Format a section with the desired bold, italic, underline, font size and font family and other formatting and press the Copy Formatting option inside the FormatPainer dropdown. This operation will save the formatting of the selected content in the clipboard.

To apply the saved formatting, select the text that you want to format and click the Apply Formatting button.

If needed, you can also reset the saved clipboard formatting by pressing the Clear Formatting option.

Supported Tags and Styles

"B", "U", "I", "STRIKE", "EM", "H1", "H2", "H3", "H4", "H5", "H6", "SUP", "SUB" "color", "font-family", "font-size", "font-style", "font-variant", "font-weight", "background-color", "background-image", "background-position", "background-repeat" and "background-attachment"

  • DefaultCS.aspx
  • Tools.xml
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" ToolsFile="Tools.xml" Width="800px">
            <CssFiles>
                <telerik:EditorCssFile Value="~/App_Themes/Default/CustomStyles.css" />
            </CssFiles>
            <Content>
            <p><strong><em>This is a paragraph with bold and italic formatting, which you can copy by clicking inside the paragraph and pressing the Copy Formatting option of the FormatPainter dropdown.</em></strong></p>
            <p>This is a paragraph without any formatting. You can select a piece of text and apply the copied formatting via the Apply Formatting button.</p>
            <p  class="redText">This is another paragraph with red letters, font-family: Arial and font-size: 12px; applied by a class named redText. 
            You can copy the class formatting with the Copy Formattign dropdown button and apply it to another piece of text.</p>
            <h3 style="font-family:'Segoe UI';color:darkblue;">This is a heading tag with with inline font-family: 'Segoe UI' and darkblue color styles.</h3>
            <p>This is another paragraph without formatting and sample text which you can use to test the demo.</p>
            </Content>
        </telerik:RadEditor>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?