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

    Setting Toolbars

    Setting the tools in the RadEditor's declaration

    Setting the tools via the ToolsFile property

    •  

    Setting the tools programmatically in the code behind

    Setting the tools by using Theme

    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