Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Editor / Custom ToolStrips

   
 
 
 
 
   

  • Custom ToolStrip

    ToolStrips are useful dropdowns that contain a group of tools with related functionality and can be a very convenient means of arranging tools used in the editor. To create a custom ToolStrip follow the instructions below:

    1. Register the toolstrip by adding the following inner-tags to the RadEditor declaration:

      <telerik:radeditor runat="server" ID="RadEditor1">   
                <Tools>
                    <telerik:EditorToolGroup>                
                        <telerik:EditorToolStrip Name="AlignmentOptions" PopupHeight="150px">
                            <telerik:EditorTool Name="JustifyLeft" />
                      <      telerik:EditorTool Name="JustifyCenter" />
                      <      telerik:EditorTool Name="JustifyRight" />
                  </      telerik:EditorToolStrip>
                    </telerik:EditorToolGroup>
                </Tools>
      </telerik:radeditor>
    2. You can also add a toolstrip via the ToolsFile.xml file:
        
      <EditorToolStrip Name="Paste Options" PopupHeight="250px">
              <EditorTool Name="Cut" />
        <      EditorTool Name="Copy" />
        <      EditorTool Name="Paste" />
        <      EditorTool Name="PasteFromWord" />
        <      EditorTool Name="Paste" />
        <      EditorTool Name="PasteFromWordNoFontsNoSizes" />
        <      EditorTool Name="PastePlainText" />
        <      EditorTool Name="PasteAsHtml" />
      </      EditorToolStrip>
    3. Another way to define a toolstrip is dynamically via the codebehind:

      EditorToolGroup toolbar = new EditorToolGroup();
      RadEditor1.Tools.Add(toolbar);

      EditorToolStrip toolstrip = new EditorToolStrip("ImageManager");
      toolstrip.Tools.Add(new EditorTool("ImageManager"));
      toolstrip.Tools.Add(new EditorTool("ImageManager"));
      toolstrip.Tools.Add(new EditorTool("FlashManager"));
      toolstrip.Tools.Add(new EditorTool("MediaManager"));
      toolstrip.Tools.Add(new EditorTool("DocumentManager"));
      toolstrip.Tools.Add(new EditorTool("TemplateManager"));
      toolstrip.Tools.Add(new EditorTool("LinkManager"));

      toolbar.Tools.Add(toolstrip);

    4. To set a default toolstrip icon, provide an image file and declare the following CSS class in the page with the editor:

      <style type="text/css">
      .reTool .ToolName
      {
          background-image      : url(IconUrl);
      }
      .reTool .AlignmentOptions
      {
          background-image      : url("JustifyLeft.gif");
      }
      </      style>

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Editor.CustomToolStrip.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .reTool .AlignmentOptions
            {
                background-image: url("JustifyLeft.gif");
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadEditor runat="server" ID="RadEditor1" ToolsFile="toolsFile.xml">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorToolStrip Name="AlignmentOptions" PopupHeight="150px">
                        <telerik:EditorTool Name="JustifyLeft" />
                        <telerik:EditorTool Name="JustifyCenter" />
                        <telerik:EditorTool Name="JustifyRight" />
                    </telerik:EditorToolStrip>
                </telerik:EditorToolGroup>
            </Tools>
            <Content>
            <img alt="product logo" src="../../Img/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>
            <ImageManager ViewPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations" />
            <FlashManager ViewPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations" />
            <MediaManager ViewPaths="~/Editor/Img/UserDir/PublicRelations" />
            <DocumentManager ViewPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations" />
            <TemplateManager ViewPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations" />
        </telerik:RadEditor>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451