New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Cleaning MS Word Formatting

Automatic format stripping on paste

  • 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

manual format stripping

  • 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
  • StripFormattingOptions Configurator

Cleaning Word Formatting with the StripFormattingOptions

  • NoneSupressCleanMessage: Doesn't strip anything on paste and does not prompt user whether MS formatting should be cleaned.
  • None: If no MS Word formatting is detected, content is pasted as is. If MS Word formatting exists, user is prompted to clean it.
  • MSWord: strips Word-specific tags, preserving fonts and text sizes.
  • MSWordNoMargins: strips Word-specific tags and margins, preserving fonts and text sizes.
  • MSWordNoFonts: strips Word-specific tags, preserving text sizes.
  • MSWordRemoveAll: strips Word-specific tags, fonts and text sizes.
  • Css: strips CSS styles.
  • Font: strips Font tags.
  • Span: strips Span tags.
  • ConvertWordLists: converts Word ordered/unordered lists to HTML tags.
  • AllExceptNewLines: Clears all tags except "<br />" and new lines (\n).
  • All: strips all HTML formatting and pastes plain text.

Cleaning Word Formatting via Tools in the RadEditor Toolbar

  • Strip Word-formatting on paste - The "Paste from Word" button Paste From Word button allows you to strip the Word-specific tags from the text copied in the clipboard and will paste it in RadEditor with a single click.
  • Strip Word-formatting on paste (cleaning fonts and sizes) - The "Paste from Word cleaning fonts and sizes" button Paste From Word No Fonts No Sizes button will clean all Word-specific tags plus and will remove font names and text sizes, as they are rarely used in the web environment.
  • Forced format stripping on Paste - Developers can now enforce content formatting using the new StripFormattingOptions property. As a result, format stripping will be applied to all pasted content, with the following options: None, MSWord (retains fonts and sizes), MSWordNoFonts, MSWordRemoveAll, Css, Font, Span, All.
  • Word Content in Clipboard Interception - In case the user is trying to paste Word content with the regular Paste button or Ctrl+V, a dialog will prompt whether the Word markup should be cleaned. If the Clipboard content does not come from Word, the dialog will not be shown.
  • Strip Word-formatting after paste - As an alternative to the "Paste from Word" tool (item 1) you may paste the formatted content first and then strip it using the "Format Stripper" tool.
  • Paste plain text - The "Paste Plain Text" button Paste Plain Text button works similarly to "Paste from Word" Paste From Word button , but it removes all HTML formatting and pastes plain text, preserving the line breaks.
  • Paste as HTML - This new tool Paste As Html button allows you to paste the HTML content of the Clipboard as code, which may be quite convenient for developer-oriented applications (e.g. support systems, forums, etc.)
  • Strip formatting on submit - Formatting can also be stripped automatically on page submit for browsers that do not provide onpaste event using the OnClientSubmit event and FormatStripper command of RadEditor, e.g.

    <script type="text/javascript">
    function OnClientSubmit(editor)
    {
         editor.fire("FormatStripper", {value : "WORD"});
    }
    </script>
    <telerik:RadEditor runat="server" OnClientSubmit="OnClientSubmit"/>
    The avalable options for the FormatStripper command are ALL, ALL_NO_BRAKES, CSS, SPAN, FONT, WORD, WORD_ALL and WORD_NO_FONTS.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" Theme="Default" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.CleaningWordFormatting.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<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" />
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">

            <h2>Automatic format stripping on paste</h2>
            <telerik:RadEditor RenderMode="Lightweight" runat="server" OnClientSubmit="TelerikDemo.OnClientSubmit" ID="RadEditor1"
                SkinID="BasicSetOfTools" Width="420px" Height="300px" EnableResize="false">
                <Content>
                    <p class="MsoNoSpacing" style="margin: 0in 0in 0pt;"><span class="MsoIntenseEmphasis" style="color: #4f81bd;"><strong><em><span style="font-family: calibri;">     <br />
                    Experiment with the various options of the StripFormattingOptions setting for cleaning Word formatting.</span></em></strong></span></p>
                    <p class="MsoNoSpacing" style="margin: 0in 0in 0pt;"><span class="MsoIntenseEmphasis"><strong><em><span style="color: #4f81bd; font-family: calibri;">        
                        The content here has MS Word formatting which you can strip on submit by clicking on the "Submit and Clean" button above.<o:p></o:p></span></em></strong></span></p>
                </Content>
            </telerik:RadEditor>

            <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" UseSubmitBehavior="false" OnClick="Button1_Click" ToolTip="Useful for browsers that do not provide onPaste event"
                Text="Submit and Clean"></telerik:RadButton>

            <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" Title="Cleaned editor content" Animation="Resize"
                ShowCallout="true" Position="Center" Height="500px" Width="500px" RelativeTo="BrowserWindow"
                Modal="true" HideEvent="ManualClose" runat="server">
            </telerik:RadToolTip>
        </div>

        <div class="demo-container">
            <h2>manual format stripping</h2>
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor2" Width="420px" Height="300px" EnableResize="false">
                <Tools>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="Paste"></telerik:EditorTool>
                        <telerik:EditorTool Name="PasteFromWord"></telerik:EditorTool>
                        <telerik:EditorTool Name="PasteFromWordNoFontsNoSizes"></telerik:EditorTool>
                        <telerik:EditorTool Name="PastePlainText"></telerik:EditorTool>
                        <telerik:EditorTool Name="PasteAsHtml"></telerik:EditorTool>
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="FormatStripper"></telerik:EditorTool>
                    </telerik:EditorToolGroup>
                </Tools>
                <Content>
                        <br /><strong><em><span style="color: #4f81bd; font-family: calibri;">Use the Paste from Word, Paste from Word cleaning Fonts and Sizes , or Paste Plain Text tools to strip and paste text copied from MS Word.</span> <br />
                        <br /><span style="color: #4f81bd; font-family: calibri;">Use the FormatStripper to remove Word-formatting from existing text in the RadEditor.</span></em> </strong>
                </Content>
            </telerik:RadEditor>

        </div>
    </div>


    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadioButtonListEditMode">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadioButtonListEditMode" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>


    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel runat="server" Title="StripFormattingOptions Configurator">
        <Views>
            <qsf:View>
                <asp:CheckBoxList OnSelectedIndexChanged="RadioButtonListStripFormattingOptions_SelectedIndexChanged"
                    ID="RadioButtonListEditMode" runat="server" AutoPostBack="True" RepeatColumns="3">
                    <asp:ListItem Value="MSWord">MSWord</asp:ListItem>
                    <asp:ListItem Value="MSWordNoMargins" Selected="True">MSWordNoMargins</asp:ListItem>
                    <asp:ListItem Value="MSWordNoFonts">MSWordNoFonts</asp:ListItem>
                    <asp:ListItem Value="MSWordRemoveAll">MSWordRemoveAll</asp:ListItem>
                    <asp:ListItem Value="ConvertWordLists" Selected="True">ConvertWordLists</asp:ListItem>
                    <asp:ListItem Value="Css">Css</asp:ListItem>
                    <asp:ListItem Value="Font">Font</asp:ListItem>
                    <asp:ListItem Value="Span">Span</asp:ListItem>
                    <asp:ListItem Value="AllExceptNewLines">AllExceptNewLines</asp:ListItem>
                    <asp:ListItem Value="All">All</asp:ListItem>
                    <asp:ListItem Value="NoneSupressCleanMessage">NoneSupressCleanMessage</asp:ListItem>
                    <asp:ListItem Value="None">None</asp:ListItem>
                </asp:CheckBoxList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance