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

Setting Toolbars

Setting the tools in the RadEditor's declaration

  • 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

Setting the tools via the ToolsFile property

  • 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
  •  

Setting the tools programmatically in the code behind

  • 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

Setting the tools by using Theme

  • 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

RadEditor provides 4 different ways to configure its toolbar:

  • Setting the tools in the RadEditor's declaration:
    <telerik:RadEditor runat="server" ID="RadEditor1" Height="100px">
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="Cut"/>
                <    telerik:EditorTool Name="Copy"/>
                <    telerik:EditorTool Name="Paste"/>
            </    telerik:EditorToolGroup>
        </Tools>
    </telerik:RadEditor>
  • Setting the tools via the ToolsFile property - the same way as in the previous versions of the control:

    <telerik:RadEditor
        ToolsFile    ="~/Editor/Examples/EditorToolbars/Tools.xml"
        runat    ="server" ID="RadEditor2" Height="100px">
    </telerik:RadEditor>
  • Setting the tools programmatically in the codebehind:
    EditorToolGroup main = new EditorToolGroup();
    RadEditor3.Tools.Add(main);

    EditorTool body = new EditorTool();
    body.Name = "Bold";
    body.ShortCut = "CTRL+B";
    main.Tools.Add(body);

    EditorTool italic = new EditorTool();
    italic.Name = "Italic";
    italic.ShortCut = "CTRL+I";
    main.Tools.Add(italic);

    EditorTool underline = new EditorTool();
    underline.Name = "Underline";
    underline.ShortCut = "CTRL+U";
    main.Tools.Add(underline);
  • Setting the tools by using Theme:
    In your .skin file:
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <telerik:RadEditor runat="server" SkinId="SomeTools">
            <Tools>
                <telerik:EditorToolGroup>
                <telerik:EditorTool Name="Bold"/>
            <    telerik:EditorTool Name="Italic"/>
            </    telerik:EditorToolGroup>
            </Tools>
    </telerik:RadEditor>
    Once the skin is set, you need to declare it in the RadEditor's declaration by using the SkinId property:
    <telerik:RadEditor
        SkinID    ="SomeTools"
        Height    ="100px"
        runat    ="server" ID="RadEditor4">
    </telerik:RadEditor>

    Note: More information on how to use ASP.NET Themes is available in MSDN.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Tools.xml
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.Default.DefaultCS"  %>

<%@ 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-containers">
        <div class="demo-container size-medium">
            <h2>Setting the tools in the RadEditor's declaration</h2>
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Height="250px" Width="600px">
                <Tools>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="Cut"></telerik:EditorTool>
                        <telerik:EditorTool Name="Copy"></telerik:EditorTool>
                        <telerik:EditorTool Name="Paste"></telerik:EditorTool>
                    </telerik:EditorToolGroup>
                </Tools>
                <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-medium">
            <h2>Setting the tools via the ToolsFile property</h2>
            <telerik:RadEditor RenderMode="Lightweight" ToolsFile="~/Editor/Examples/EditorToolbars/Tools.xml" runat="server"
                ID="RadEditor2" Height="250px" Width="600px">
                <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-medium">
            <h2>Setting the tools programmatically in the code behind</h2>
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor3" Height="300px" Width="600px">
                <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-medium">
            <h2>Setting the tools by using Theme</h2>
            <telerik:RadEditor RenderMode="Lightweight" SkinID="MinimalSetOfTools" Height="300px" runat="server" ID="RadEditor4" Width="600px">
                <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>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance