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

Custom 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

RadEditor provides a flexible mechanism for adding custom dialogs that plug directly into the undo/redo mechanism and have the Telerik RadEditor look and feel. In addition, the editor provides the developer with the ability to specify arguments to be passed to the custom dialog and back to the editor.

Here are the steps to create and add a custom Insert Link dialog to RadEditor's toolbar.

  1. Add a custom button that will open the dialog:
    <telerik:radeditor runat="server" ID="RadEditor1">
       <Tools>
          <telerik:EditorToolGroup>
                 <telerik:EditorTool Name="InsertSpecialLink" Text="Insert Special Link"/>
          </
    telerik:EditorToolGroup>
       </Tools>
       <Content>
            Sample Content
       </Content>
    </telerik:radeditor>
  2. To display your own icon for the InsertSpecialLink button set the following style tag in your page:

    <style type="text/css"
    >
    .reToolbar.Default .InsertSpecialLink
    {
            background-image
    : url(Custom.gif);
    }
    <
    /style>
  3. Add the following JavaScript command under the editor's declaration:

        <script type="text/javascript">
        Telerik.Web.UI.Editor.CommandList[
    "InsertSpecialLink"] = function(commandName, editor, args)
        {
           
    var elem = editor.getSelectedElement(); //returns the selected element.
                  
           
    if (elem.tagName == "A")
           {
                editor.selectElement(elem)
    ;
               
    argument = elem;
           
    }
           
    else
           
    {
                //remove links if present from the current selection - because of JS error thrown in IE
                
    editor.fire("Unlink");
                    
                
    //remove Unlink command from the undo/redo list
                
    var commandsManager editor.get_commandsManager();
                var 
    commandIndex commandsManager.getCommandsToUndo().length - 1;
                
    commandsManager.removeCommandAt(commandIndex);

                var 
    content editor.getSelectionHtml();

                var 
    link editor.get_document().createElement("A");

                
    link.innerHTML content;
                
    argument link;        

            }
           
           
    var myCallbackFunction = function(sender, args)
           {
               editor.pasteHtml(String.format(
    "<a href={0} target='{1}' class='{2}'>{3}</a> ", args.href, args.target, args.className, args.name))
           }
           
           editor.showExternalDialog(
               
    'InsertLink.aspx',
                argument,
               
    270,
               
    300,
                myCallbackFunction,
               
    null,
               
    'Insert Link',
               
    true,
                Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
               
    false,
               
    false);
       
    };
        </
    script>

    The custom command functions are to open a specified custom dialog and to supply arguments from the main page to the opened dialog by firing the showExternalDialog method. The editor's showExternalDialog() method has the following arguments:

    showExternalDialog(url (aspx/html file), argument, width, height, callbackFunction, callbackArgs, title, modal, behaviors, showStatusbar, showTitlebar);
  4. The next step is to create the dialog aspx file. For this scenario, you should create a page named InsertLink.aspx. Once the dialog file is created add the following JavaScript code in it as well as the code for the link insertion:

        <fieldset style="width: 214px; height: 192px">
            Link name:
    <input type="text" id="linkName"><br/>
            Link URL:
    <input type="text" id="linkUrl"><br/>
            Link target:
    <input type="text" id="linkTarget"><br/>
            Link class:
    <input type="text" id="linkClass"><br/>
           
    <input type="button" onclick="javascript:insertLink();" value="Insert Link"/>
        </
    fieldset>

       
    <script type="text/javascript">
       
    if (window.attachEvent)
        {
           
    window.attachEvent("onload", initDialog);
       
    }
       
    else if (window.addEventListener)
        {
           
    window.addEventListener("load", initDialog, false);
       
    }

       
    var linkUrl = document.getElementById("linkUrl");
        var
    linkTarget = document.getElementById("linkTarget");
        var
    linkClass = document.getElementById("linkClass");
        var
    linkName = document.getElementById("linkName");

        var
    workLink = null;

        function
    getRadWindow()
        {
               
    if (window.radWindow)
            {
               
    return window.radWindow;
           
    }
           
    if (window.frameElement && window.frameElement.radWindow)
            {
               
    return window.frameElement.radWindow;
           
    }
           
    return null;
       
    }

       
    function initDialog()
        {
           
    var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page
                 
           
    linkUrl.value = clientParameters.href;
           
    linkTarget.value = clientParameters.target;
           
    linkClass.value = clientParameters.className;
           
    linkName.value = clientParameters.innerHTML;
           
           
    workLink = clientParameters;
       
    }

       
    function insertLink() //fires when the Insert Link button is clicked
       
    {
           
    //create an object and set some custom properties to it      
           
    workLink.href = linkUrl.value;
           
    workLink.target = linkTarget.value;
           
    workLink.className = linkClass.value;
           
    workLink.name = linkName.value;
                 
           
    getRadWindow().close(workLink); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.
       
    }
       
    </script>
  5. When the getRadWindow().close(closeArguments) is fired it will pass the closeArguments value to the myCallbackFunction function on the main page. Thus you will be able to construct an HTML link and paste it in the editor with the pasteHtml function:

    var myCallbackFunction = function(sender, args)
    {
         editor.pasteHtml(String.format("<a href={0} target='{1}' class='{2}'>{3}</a> ", args.href, args.target, args.className, args.name))
    }
  • DefaultVB.aspx
    • DefaultVB.aspx
    • InsertEmoticon.aspx
    • InsertLink.aspx
    • PrintPreview.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Theme="Default" Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"Inherits="Telerik.Web.Examples.Editor.CustomDialogs.DefaultVB"  %>

<%@ 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" />
    <script src="scripts.js" type="text/javascript"></script>
</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" Width="800px" OnClientLoad="TelerikDemo.editor_onClientLoad">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="InsertSpecialLink" Text="Insert Special Link"></telerik:EditorTool>
                    <telerik:EditorTool Name="PrintPreview" Text="Print Preview"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertEmoticon" Text="Insert Smiley"></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 <a href="http://asp.net/ajax">ASP.NET AJAX</a></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