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

Working With Large Content

Content with Size 1.25MB (1,313,683 bytes)

  • 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

There are a couple of main factors responsible for the slow RadEditor's performance when pasting, loading, editing or saving large XHTML / HTML / TXT files, which content size exceeds 100KB:

  • The Undo / Redo mechanism and other maintenance code that ensures the smooth user experience - it gets increasingly cumbersome and time consuming for the browser to execute it if huge content is in the editor. That is why it is recommended to remove the Undo and Redo buttons from the toolbar when editing large content as shown in this article: Removing Toolbar Buttons.
  • The built-in RadEditor's modules are updatable on selection and they could also decrease the content editing abilities when editing huge content. You can see how to remove the modules in this help article: Disable or Hide Modules.
  • In difference with the TextBox control, which does not process the content when submitting it to the server, RadEditor runs more than 12 content filters, which validate the content and make it XHTML compliant. These filters executes regular expressions and DOM methods to validate the content, which slow down the content submission to the server.
    To disable the built-in filters set the ContentFilters property to None.
  • The content formatting stripping when pasting huge content uses a lot of CPU resources and the browser could freezes for a long period of time depending on the hardware configuration of the client's machine.
    The developer could configure the editor to not check and strip the formatting of the pasted content by setting the StripFormattingOptions property to "NoneSupressCleanMessage".
  • It is important to test the performance only when debugging is disabled. Set <compilation debug="false" /> in the web.config. When it is true, the MS AJAX debugging code causes a severe performance hit on the client-side. The fact that most of the editor functionality is implemented in JavaScript, thus resulting in 10 times slower performance compared to native compiled code.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Theme="Default" Language="C#" Debug="true" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.WorkingWithLargeContent.DefaultCS"  %>

<%@ 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="../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">
        <h2>Content with Size 1.25MB (1,313,683 bytes)</h2>
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" ContentFilters="None" StripFormattingOptions="NoneSupressCleanMessage" Width="800px">
            <Tools>
                <telerik:EditorToolGroup Tag="MainToolbar">
                    <telerik:EditorTool Name="FindAndReplace"></telerik:EditorTool>
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="Cut"></telerik:EditorTool>
                    <telerik:EditorTool Name="Copy"></telerik:EditorTool>
                    <telerik:EditorTool Name="Paste" ShortCut="CTRL+V"></telerik:EditorTool>
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup Tag="Formatting">
                    <telerik:EditorTool Name="Bold"></telerik:EditorTool>
                    <telerik:EditorTool Name="Italic"></telerik:EditorTool>
                    <telerik:EditorTool Name="Underline"></telerik:EditorTool>
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="ForeColor"></telerik:EditorTool>
                    <telerik:EditorTool Name="BackColor"></telerik:EditorTool>
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="FontName"></telerik:EditorTool>
                    <telerik:EditorTool Name="RealFontSize"></telerik:EditorTool>
                </telerik:EditorToolGroup>
            </Tools>
        </telerik:RadEditor>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance