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

MS Word-like Experience

  • AcceptTrackChange
  • RejectTrackChange
  • AddComment
  • RemoveComment
  • 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

This demo shows how close the interface and user experience in RadEditor are to those of MS Word.

The convenient ribbon bar (entirely customizable via the tools file definition) lets you use key features like:

  • text formatting (font, font size, bold, italic, text alignment, lists)
  • track changes and comments
  • file import and export
  • spell checking
  • inserting elements (images, tables, symbols, form elements)
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
  • word-like-tools.xml
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Editor.ms_word_like_experience.DefaultCS" Theme="Default"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript">
        TelerikDemo.rwUploadId = "<%=RadWindow1.ClientID%>";
        TelerikDemo.rnMessagesId = "<%=RadNotification1.ClientID%>";
        TelerikDemo.reId = "<%=RadEditor1.ClientID%>";
    </script>
    <div class="demo-container no-bg">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" ToolbarMode="RibbonBar" Width="900px" Height="600px"
            EnableTrackChanges="true" EnableComments="true" ToolsFile="word-like-tools.xml"
            ContentFilters="DefaultFilters, PdfExportFilter" SkinID="WordLikeExperience"
            OnClientLoad="TelerikDemo.toggleTrackChanges" EditModes="Design, Preview">
            <TrackChangesSettings CanAcceptTrackChanges="true" Author="John Smith" />
            <ExportSettings OpenInNewWindow="true" FileName="RadEditor-Export"></ExportSettings>
            <ImageManager
                ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations" />
        </telerik:RadEditor>
    </div>
    <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" Title="Upload File" Behaviors="Close, Move" VisibleStatusbar="false" AutoSize="true">
        <ContentTemplate>
            <div style="width: 350px">
                Upload a DOCX, DOC or RTF file to load its content for editing. You can also use plain text (.txt) or HTML (.htm, .html) files and content.<br />
                <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" AllowedFileExtensions="doc,docx,rtf,txt,htm,html,md" MaxFileInputsCount="1"
                                        OnClientValidationFailed="TelerikDemo.OnClientValidationFailed" OnClientFileUploaded="TelerikDemo.uploadFile"
                                        OnFileUploaded="RadAsyncUpload1_FileUploaded" Width="100%">
                </telerik:RadAsyncUpload>
            </div>
        </ContentTemplate>
    </telerik:RadWindow>
    <telerik:RadNotification RenderMode="Lightweight" ID="RadNotification1" runat="server" Width="350px" Height="150px" Title="An error occured" TitleIcon="warning"
                            ContentIcon="info" Position="Center" AutoCloseDelay="5000" EnableRoundedCorners="true" EnableShadow="true">
    </telerik:RadNotification>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance