Editor - Auto Save Content

RadEditor content will be automatically saved after  seconds.
  • 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
The Saved content will be displayed below:

RadEditor for ASP.NET AJAX

RadEditor is not simply an HTML1 Editor. It is what Microsoft chose to use in MSDN, CodePlex, TechNet, MCMS and even as an alternative to the default editor in SharePoint. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean XHTML output, fast rendering, widest cross-browser support, and tons of features.

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates how to implement autosave functionality using RadEditor and MS AJAX Timer. In the example the editor's content is read on the server in the Timer OnTick event, and fed into a label. In a real world scenario the content would be saved into a database or other temporary storage.

The Timer is configured to perform an AJAX request every 15 seconds. However, it is not advisable to do so without checking whether the user is using the AJAX SpellCheck at the time of sending the content. While it is in AJAX SpellCheck mode, the editor's content contains additional formatting inserted by the spellchecker to highlight mistaken words. As a result, it is not desireable to save the content while in spellcheck mode.

RadEditor provides events that are raised when a spellcheck starts and ends. The example demonstrates how to attach to these events, and stops the Timer during spellchecking, and restarts it when the spellcheck is finished.

<script type="text/javascript"
   
function OnClientLoad(sender, args) 
    { 
       
var timer = $find("<%=Timer1.ClientID %>")
        
       
//Attach to the spellCheckLoaded event as the spell itself is loaded with AJAX 
       
sender.add_spellCheckLoaded(
           
function() 
            {
               
var spell = sender.get_ajaxSpellCheck()
            
               
spell.add_spellCheckStart(
                   
function(sender, args) 
                    { 
                        timer._stopTimer()
;
                   
});
            
               
spell.add_spellCheckEnd(
                   
function(sender, args) 
                    {
                       
//Restart the timer; 
                       
timer._startTimer();
                   
});
           
} );
       
}
</script>

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

<%@ 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" />
    <script src="scripts.js" type="text/javascript"></script>
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript">
        function findTimer() {
            return $find("<%= Timer1.ClientID%>");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="theAjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Timer1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lbl1" LoadingPanelID="theLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="theLoadingPanel" runat="server"></telerik:RadAjaxLoadingPanel>
    <qsf:MessageBox ID="MessageBox1" runat="server" Type="Warning" Icon="DBReset">
        RadEditor content will be automatically saved after <span id="remainingSeconds"></span>&nbsp;seconds.
    </qsf:MessageBox>
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" OnClientLoad="TelerikDemo.OnClientLoad" SkinID="BasicSetOfTools" ContentAreaMode="Div" Width="600px">
                <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"></ImageManager>
                <Content>
                    <h2 class="titleText">RadEditor for ASP.NET AJAX</h2>
                    <p style="text-align: justify;"><span style="font-size: 19px; color: #4f6128;"><strong>RadEditor</strong></span><span style="color: #4f6128;"> </span>is not simply an HTML<a href="#HTMLDescription"><sup>1</sup></a> Editor. It is what Microsoft chose to use in <strong>MSDN</strong>, <strong>CodePlex</strong>, <strong>TechNet</strong>, <strong>MCMS</strong> and even as an alternative to the default editor in <a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx">SharePoint</a>. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean <strong>XHTML</strong> output, fast rendering, widest cross-browser support, and <a href="http://www.telerik.com/products/aspnet-ajax/editor.aspx">tons of features</a>.</p>
                </Content>
            </telerik:RadEditor>
        </div>
        <div class="demo-container size-medium">
            <asp:Timer ID="Timer1" runat="server" Interval="15000" OnTick="Timer1_Tick">
            </asp:Timer>
            <div class="content-container">
                <div class="label-container">
                    <span class="label">The Saved content will be displayed below:</span>
                </div>
                <div class="content">
                    <div runat="server" id="lbl1">
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?