Editor - Optimize Toolbar Loading

  • 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

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

Toolbar Modes

RadEditor introduces a property named ToolbarMode, which specifies the behaviour of the toolbar. Here are the different options for setting the ToolbarMode:

  • Default - the toolbar is static and positioned over the content area
  • PageTop - in this mode, when a particular editor gets the focus its toolbar will appear docked at the top of the page
  • ShowOnFocus - here the toolbar will appear right above the editor when it gets focus.
  • Floating - the toolbar will pop up in a window and will allow the user to move it over the page.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • ToolsFile.xml
    • ToolsFile.xml
    • ToolsFileLimited.xml
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.ToolbarMode.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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server" Width="300px" Height="200px" ToolsFile="ToolsFileLimited.xml">
                <Content>
                    <img alt="product logo" src="../../images/productLogoLight.gif" />is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are: 
                    <ul>
                        <li><em>Single-file, drag-and-drop deployment</em></li>
                        <li><em>Built on top of ASP.NET AJAX</em></li>
                        <li><em>Unmatched loading speed with new semantic rendering </em></li>
                        <li><em>Full keyboard accessibility</em></li>
                        <li><em>Flexible Skinning mechanism</em></li>
                        <li><em>Simplified and intuitive toolbar configuration</em></li>
                        <li><em>Out-of-the-box XHTML-enabled output</em></li>
                    </ul>
                </Content>
            </telerik:RadEditor>
        </div>
        <div class="demo-container size-narrow">
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor2" runat="server" Width="500px" Height="200px" ToolsFile="ToolsFile.xml">
                <Content>
                        <img alt="product logo" src="../../images/productLogoLight.gif" /> is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and powerful new capabilities of the Telerik UI for ASP.NET AJAX suite features the new WYSIWYG Editor as a flexible and lightweight component, turning to be the fastest loading Web Editor. Among the hottest features are:                    
                        <ul>
                            <li><em>Single-file, drag-and-drop deployment</em></li>
                            <li><em>Built on top of ASP.NET AJAX</em></li>
                            <li><em>Unmatched loading speed with new semantic rendering </em></li>
                            <li><em>Full keyboard accessibility</em></li>
                            <li><em>Flexible Skinning mechanism</em></li>
                            <li><em>Simplified and intuitive toolbar configuration</em></li>
                            <li><em>Out-of-the-box XHTML-enabled output</em></li>
                        </ul>
                </Content>
            </telerik:RadEditor>
        </div>
        <div class="demo-container size-custom">
            <telerik:RadEditor RenderMode="Lightweight" ID="RadEditor3" runat="server" Width="868px" Height="270px">
                <Content>
                        <img alt="product logo" src="../../images/productLogoLight.gif" /> is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and powerful new capabilities of the Telerik UI for ASP.NET AJAX suite features the new WYSIWYG Editor as a flexible and lightweight component, turning to be the fastest loading Web Editor. Among the hottest features are:                    
                        <ul>
                            <li><em>Single-file, drag-and-drop deployment</em></li>
                            <li><em>Built on top of ASP.NET AJAX</em></li>
                            <li><em>Unmatched loading speed with new semantic rendering </em></li>
                            <li><em>Full keyboard accessibility</em></li>
                            <li><em>Flexible Skinning mechanism</em></li>
                            <li><em>Simplified and intuitive toolbar configuration</em></li>
                            <li><em>Out-of-the-box XHTML-enabled output</em></li>
                        </ul>
                </Content>
                <Modules>
                    <telerik:EditorModule Name="fakeModule"></telerik:EditorModule>
                </Modules>
            </telerik:RadEditor>
        </div>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View runat="server">
                <qsf:ConfiguratorColumn runat="server" Title="Toolbar Mode" Size="Medium">
                    <qsf:DropDownList ID="ChooseToolbarMode" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ChooseToolbarMode_SelectedIndexChanged">
                        <Items>
                            <telerik:DropDownListItem Value="Default" Text="Default" />
                            <telerik:DropDownListItem Value="PageTop" Text="PageTop" />
                            <telerik:DropDownListItem Value="ShowOnFocus" Selected="True" Text="ShowOnFocus" />
                            <telerik:DropDownListItem Value="Floating" Text="Floating" />
                        </Items>
                    </qsf:DropDownList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?