Editor

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Editor - Cleaning MS Word Formatting

Automatic format stripping
  1. Formatting is stripped on paste - using the StripFormattingOptions setting




  2. Strip formatting on page submit (useful for browsers that do not provide onpaste event)
RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
RadEditor's components - toolbar, content area, modes and modules
   
Toolbar's wrapper  
Content area wrapper
RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
Editor Mode buttonsStatistics moduleEditor resizer
  
RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
   
The enumeration values of the StripFormattingOnPaste property are:
  • 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.
Manual format stripping
  1. Using one of the special Paste tools for pasting content
  2. Using the FormatStripper tool
RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
RadEditor's components - toolbar, content area, modes and modules
   
Toolbar's wrapper 
 
Content area wrapper
RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
Editor Mode buttonsStatistics moduleEditor resizer
  
RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
   
Use the Paste from WordPaste From Word button, Paste from Word cleaning Fonts and SizesPaste From Word No Fonts No Sizes button or "Paste Plain Text" tools to strip and paste text copied from MS Word.
Use the Format StripperFormat Stripper tool icon to remove special formatting from existing text in the RadEditor.
Format Stripper Demo
Cleaning Word Formatting

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.)

8. 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.

More information on the different stripping options is available in the following help article: Cleaning Word Formatting.

C# VB
Show code in new window Demo isolation steps
<%@ 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 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>Cleaning Word Formatting in WYSIWYG Editor for ASP.NET | RadEditor Demo</title>
     <style type="text/css">
          table
          {
               border-collapse: collapse;
          }
          
          td.module
          {
               border: 1px solid #C6E1F2;
               padding: 1.2em;
          }
          
          .ol
          {
               margin-left: -10px;
          }
          
          .ol table
          {
               display: block;
               margin: 8px 0;
          }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <table border="0" cellpadding="0" cellspacing="0" width="880">
          <tr valign="top">
               <td class="module" style="width: 570px;">
                    <asp:UpdatePanel ID="UP1" runat="server">
                         <ContentTemplate>
                              <telerik:RadToolTip 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>
                              <strong>Automatic format stripping</strong>
                              <ol class="ol">
                                   <li>Formatting is stripped on paste - using the <b>StripFormattingOptions</b> setting<br />
                                        <asp:CheckBoxList RepeatDirection="Horizontal" CellPadding="0" CellSpacing="0" RepeatColumns="3"
                                             OnSelectedIndexChanged="RadioButtonListStripFormattingOptions_SelectedIndexChanged"
                                             CssClass="text" ID="RadioButtonListEditMode" runat="server" AutoPostBack="True">
                                             <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>
                                   </li>
                                   <li>Strip formatting on page submit (useful for browsers that do not provide onpaste
                                        event)
                                        <asp:Button ID="Button1" runat="server" UseSubmitBehavior="false" OnClick="Button1_Click"
                                             Text="Submit and Clean"></asp:Button>
                                   </li>
                              </ol>
                              <script type="text/javascript">
                                   function OnClientSubmit(editor) {
                                        //other possible values are All, ALL_NO_BRAKES, CSS, SPAN, FONT, WORD_ALL and WORD_NO_FONTS
                                        editor.fire("FormatStripper", { value: "WORD" });
                                   }
                              </script>
                              <telerik:RadEditor runat="server" OnClientSubmit="OnClientSubmit" ID="RadEditor1"
                                   SkinID="BasicSetOfTools" Width="420" Height="300" 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>
                         </ContentTemplate>
                    </asp:UpdatePanel>
               </td>
               <td class="module">
                    The enumeration values of the <strong>StripFormattingOnPaste</strong> property are:<br />
                    <ul>
                         <li><span style="font-size: 9pt"><strong>NoneSupressCleanMessage:</strong> Doesn't strip
                              anything on paste and does not prompt user whether MS formatting should be cleaned.</span></li>
                         <li><span style="font-size: 9pt"><strong>None:</strong> If no MS Word formatting is
                              detected, content is pasted as is. If MS Word formatting exists, user is prompted
                              to clean it.</span></li>
                         <li><span style="font-size: 9pt"><strong>MSWord:</strong> strips Word-specific tags,
                              preserving fonts and text sizes.</span></li>
                         <li><span style="font-size: 9pt"><strong>MSWordNoMargins:</strong> strips Word-specific
                              tags and margins, preserving fonts and text sizes.</span></li>
                         <li><span style="font-size: 9pt"><strong>MSWordNoFonts:</strong> strips Word-specific
                              tags, preserving text sizes.</span></li>
                         <li><span style="font-size: 9pt"><strong>MSWordRemoveAll:</strong> strips Word-specific
                              tags, fonts and text sizes.</span></li>
                         <li><span style="font-size: 9pt"><strong>Css:</strong> strips CSS styles.</span></li>
                         <li><span style="font-size: 9pt"><strong>Font:</strong> strips Font tags.</span></li>
                         <li><span style="font-size: 9pt"><strong>Span:</strong> strips Span tags.</span></li>
                         <li><span style="font-size: 9pt"><strong>ConvertWordLists:</strong> converts Word ordered/unordered
                              lists to HTML tags.</span></li>
                         <li><span style="font-size: 9pt"><strong>AllExceptNewLines</strong>: Clears all tags
                              except "&lt;br /&gt;" and new lines (\n)</span>.</li>
                         <li><span style="font-size: 9pt"><strong>All</strong>: strips all HTML formatting and
                              pastes plain text.</span></li>
                    </ul>
               </td>
          </tr>
          <tr valign="top">
               <td class="module">
                    <b>Manual format stripping</b>
                    <ol>
                         <li>Using one of the special Paste tools for pasting content</li>
                         <li>Using the FormatStripper tool</li>
                    </ol>
                    <telerik:RadEditor runat="server" ID="RadEditor2" Width="420" Height="200" 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>
               </td>
               <td class="module">
                    Use the <strong>Paste from Word</strong><img src="Icons/PasteFromWord.gif" alt="Paste From Word button" />,
                    <strong>Paste from Word cleaning Fonts and Sizes</strong><img src="Icons/PasteFromWordNoFontsNoSizes.gif"
                         alt="Paste From Word No Fonts No Sizes button" />
                    or "<strong>Paste Plain Text</strong>" tools to strip and paste text copied from
                    MS Word.
                    <br />
                    Use the <strong>Format Stripper</strong><img src="Icons/FormatStripper.gif" alt="Format Stripper tool icon" />
                    to remove special formatting from existing text in the RadEditor.<br />
                    <img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px;
                         border-right-width: 0px" src="Icons/FormatStripper.png" alt="Format Stripper Demo" />
               </td>
          </tr>
     </table>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here