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

Custom ToolStrips

  • 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

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>

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • ToolsFile.xml
<%@ 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" %>
<!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" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" ToolsFile="toolsFile.xml" Width="800px">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorToolStrip Name="AlignmentOptions" popupheight="150px">
                        <telerik:EditorTool Name="JustifyLeft"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyCenter"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyRight"></telerik:EditorTool>
                    </telerik:EditorToolStrip>
                </telerik:EditorToolGroup>
            </Tools>
            <Content>
            <h2 class="titleText">
                RadEditor for ASP.NET AJAX
            </h2>
            <p style="text-align: justify;">
                <span style="font-size: 19px; color: #4f6128;">
                    <strong>RadEditor</strong>
                </span><span style="color: #4f6128;"> </span>is not simply an HTML<a href="#HTMLDescription">
                    <sup>1</sup>
                </a> Editor. It is what Microsoft chose to use in <strong>MSDN</strong>, <strong>CodePlex</strong>, <strong>TechNet</strong>, <strong>MCMS</strong> and even as an alternative to the default editor in <a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx">SharePoint</a>. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean <strong>XHTML</strong> output, fast rendering, widest cross-browser support, and <a href="http://www.telerik.com/products/aspnet-ajax/editor.aspx">
                    tons of features
                </a>: <br />
                <br />
                <img style="margin-top: 25px; float: left; margin-right: 15px;" alt="product logo" src="../../images/editor.jpg" />
            </p>
            <ul style="width: 350px; float: left;">
                <li>
                    <em>
                        Out-of-the-box XHTML-enabled Output...
                    </em>
                </li>
                <li>
                    <em>
                        Unmatched Loading Speed and Performance
                    </em>
                </li>
                <li>
                    <em>
                        Microsoft Word-like Spell-checking
                    </em>
                </li>
                <li>
                    <em>
                        Seven Ways for Pasting from Word
                    </em>
                </li>
                <li>
                    <em>
                        Multilevel Undo/Redo with Action Trails
                    </em>
                </li>
                <li>
                    <em>
                        Extended Functionality Through Integrated Controls
                    </em>
                </li>
            </ul>
            <table width="500" style="margin: 0pt auto; clear: both;">
                <thead>
                    <tr>
                        <th style="background-color: #ebf1dd;">Browser/OS</th>
                        <th style="background-color: #ebf1dd;">Windows</th>
                        <th style="background-color: #ebf1dd;">
                            Mac OS
                        </th>
                        <th style="background-color: #ebf1dd;">Linux</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td align="center" style="text-align: left; vertical-align: middle;">
                            <img style="float: left;" alt="ie" src="../../images/BrowserIcons/ie.gif" />&nbsp; Internet Explorer
                        </td>
                        <td valign="top" style="background-color: #f2f2f2;">6.0+</td>
                        <td valign="top" style="background-color: #e5e0ec;">- </td>
                        <td valign="top" style="background-color: #dbeef3;">- </td>
                    </tr>
                    <tr>
                        <td>
                            <img style="float: left;" alt="ff" src="../../images/BrowserIcons/ff.gif" />&nbsp; Firefox
                        </td>
                        <td style="background-color: #f2f2f2;">1.5+</td>
                        <td style="background-color: #e5e0ec;">1.5+</td>
                        <td style="background-color: #dbeef3;">1.5+</td>
                    </tr>
                    <tr>
                        <td>
                            <img style="float: left;" alt="chrome" src="../../images/BrowserIcons/chrome.gif" />&nbsp; Google Chrome
                        </td>
                        <td style="background-color: #f2f2f2;">0.2+</td>
                        <td style="background-color: #e5e0ec;">5.0+</td>
                        <td style="background-color: #dbeef3;">5.0+</td>
                    </tr>
                    <tr>
                        <td>
                            <img style="float: left;" alt="opera" src="../../images/BrowserIcons/opera.gif" />&nbsp; Opera
                        </td>
                        <td style="background-color: #f2f2f2;">9.0+</td>
                        <td style="background-color: #e5e0ec;">9.0+</td>
                        <td style="background-color: #dbeef3;">-</td>
                    </tr>
                    <tr>
                        <td>
                            <img style="float: left;" alt="safari" src="../../images/BrowserIcons/safari.gif" />&nbsp; Safari
                        </td>
                        <td style="background-color: #f2f2f2;">3.0+</td>
                        <td style="background-color: #e5e0ec;">3.0+</td>
                        <td style="background-color: #dbeef3;">-</td>
                    </tr>
                </tbody>
            </table>
            <br />
            <p style="border-top: 1px solid #555555; padding-top: 10px;">
                <sup>
                    <sup>
                        <a id="HTMLDescription">1.</a>
                    </sup>The computer language used to create world-wide-web pages which are read by browsers.
                </sup>
            </p>
            </Content>
            <ImageManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></ImageManager>
            <FlashManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></FlashManager>
            <MediaManager ViewPaths="~/Editor/images/UserDir/PublicRelations"></MediaManager>
            <DocumentManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></DocumentManager>
            <TemplateManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></TemplateManager>
        </telerik:RadEditor>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance