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

Customize Built-in Dialogs

  • 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

By default, all RadEditor dialogs are embedded as resource files in the Telerik.Web.UI.dll. In order to provide an easy way to modify the editor's dialogs, the Telerik UI installation now comes with a folder named EditorDialogs which contains all editor's dialogs files.

You can configure RadEditor to use its external dialog files by copying the EditorDialogs folder to your web application and setting the ExternalDialogsPath property to point to it, e.g.

<telerik:radeditor ExternalDialogsPath="~/Editor/Examples/ExternalDialogsPath/EditorDialogs/" runat="server" ID="RadEditor1"></telerik:radeditor>
The example demonstrates how to customize the Link manager by hiding its Anchor tab as well as the Existing Anchor dropdown on the Hyperlink tab.

Here are the steps:

  1. Copy the EditorDialogs installation folder to your web application.
  2. Set the ExternalDialogsPath property to point to the EditorDialogs folder
  3. Open the EditorDialogs/LinkManager.ascx file and to hide the Anchor tab set Visible="false" to the following RadTab's control:
    <telerik:RadTab Text="Anchor"Visible="false" Value="Anchor"></telerik:RadTab>
  4. After that locate the <tr> tag, which wraps the ExistingAnchor label and dropdown and hide it by setting style="display:none" to it, e.g.

    <tr id="existingAnchorRow"style="display:none;" runat="server">
            <td class="reLabelCell">
                <label for="ExistingAnchor" class="reDialogLabel">
                    <span>
                        <script type="text/javascript">document.write(localization["ExistingAnchor"]);</script>
                    </span>
                </label>
            </td>
            <td class="reControlCell">
                <select id="ExistingAnchor">
                    <option selected="selected">None</option>
                </select>
            </td>
    </tr>

Important Change! : Starting from Q3 2013 an important change was introduced regarding the enabled Auto Resize feature of the dialogs. Setting a custom size for the built-in dialogs via the DialogDefinitions class will not be respected, due to this change.
You can find more information and instructions for how to properly resize the dialogs by following the "Dialog's Auto Size feature enabled" article in the Changes and Backwards Compatibility section of the RadEditor's documentation.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.ExternalDialogsPath.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-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" ExternalDialogsPath="~/Editor/Examples/ExternalDialogsPath/EditorDialogs/"
            runat="server" ID="RadEditor1" Width="800px">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="Bold"></telerik:EditorTool>
                    <telerik:EditorTool Name="Italic"></telerik:EditorTool>
                    <telerik:EditorTool Name="Underline"></telerik:EditorTool>
                    <telerik:EditorTool Name="LinkManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="Unlink"></telerik:EditorTool>
                    <telerik:EditorTool Name="DocumentManager"></telerik:EditorTool>
                </telerik:EditorToolGroup>
            </Tools>
            <DocumentManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                DeletePaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></DocumentManager>
            <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>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance