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

Using Tool Provider

  • 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

  • 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

  • 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

  • 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

  • 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
  • Demo Configurator
Performance Optimization Options
Results

In this example you can review how to use the editor's ToolProviderID property. The ToolProviderID property helps to significantly reduce the HTML markup and JSON(Javascript Object Notation) sent from server to the client when multiple RadEditor objects with the same tools are used on the same page. The ToolProviderID should be set to the ID of another RadEditor e.g.

ASPX:

< telerik : RadEditor runat ="server" ID ="RadEditor1"></ telerik : RadEditor >
< telerik : RadEditor runat ="server" ID ="RadEditor2" ToolProviderID ="RadEditor1"></ telerik : RadEditor >
< telerik : RadEditor runat ="server" ID ="RadEditor3" ToolProviderID ="RadEditor1"></ telerik : RadEditor >
............

Code-Behind:
RadEditor2.ToolProviderID = "RadEditor1";
RadEditor3.ToolProviderID = "RadEditor1";
............

Maximum optimization is achieved when ToolProviderID is combined with ToolbarMode=ShowOnFocus.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • BasicTools.xml
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.ToolProvider.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" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div id="editorArea" class="demo-containers">
        <div class="demo-container">
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server" Height="350px" OnClientLoad="TelerikDemo.OnFirstEditorLoaded">
                <Modules>
                    <telerik:EditorModule Name="RadEditorStatistics" dockingzone="Bottom" Enabled="True"
                        Visible="True"></telerik:EditorModule>
                </Modules>
            </telerik:RadEditor>
        </div>
        <br />
        <div class="demo-container">
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor2" runat="server" Height="350px">
            </telerik:RadEditor>
        </div>
        <br />
        <div class="demo-container">
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor3" runat="server" Height="350px">
            </telerik:RadEditor>
        </div>
        <br />
        <div class="demo-container">
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor4" runat="server" Height="350px">
            </telerik:RadEditor>
        </div>
        <br />
        <div class="demo-container">
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor5" runat="server" Height="350px">
            </telerik:RadEditor>
        </div>
    </div>

    <asp:HiddenField runat="server" ID="ServerTime1" ClientIDMode="Static" />

    <telerik:RadAjaxManager runat="server" ID="theAjaxManager">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="demoConfigurator">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="theLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="RadEditor1" LoadingPanelID="theLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="RadEditor2" LoadingPanelID="theLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="RadEditor3" LoadingPanelID="theLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="RadEditor4" LoadingPanelID="theLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="RadEditor5" LoadingPanelID="theLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="ServerTime1" LoadingPanelID="theLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:ConfiguratorColumn runat="server" Title="Performance Optimization Options" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="UseToolProvider" runat="server" Checked="false" Text="Use Tool Provider"
                                    title="Use Tool Provider"></asp:CheckBox></span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="UseShowOnFocusToolbarMode" Checked="false" Text="Use ShowOnFocus Toolbar Mode"
                                    runat="server" title="Use ShowOnFocus Toolbar Mode"></asp:CheckBox></span></li>
                        <li>
                            <qsf:Button ID="SubmitButton" runat="server" Text="Update" title="Apply Settings" Size="Medium"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Results" Size="Wide">
                    <div id="MessageDiv">
                    </div>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance