Editor

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Editor - Custom Dialogs

RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
RadEditor's components - toolbar, content area, modes and modules
   
Toolbar's wrapper 
 
Content area wrapper
RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
Editor Mode buttonsStatistics moduleEditor resizer
 
 
RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
   

Add Custom Dialogs

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))
    }
C# VB
Show code in new window Demo isolation steps
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.CustomDialogs.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>
    <title>Adding custom dialogs in HTML Editor for ASP.NET AJAX | RadEditor Demo</title>
     <style type="text/css">
          .reTool .InsertSpecialLink {
               background-image: url(Custom.gif) !important;
          }
          .reTool .PrintPreview {
               background-image: url(CustomDialog.gif) !important;
          }
          .reTool .InsertEmoticon {
               background-image: url(Emoticons/1.gif) !important;
          }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:RadEditor runat="server" ID="RadEditor1" Width="680px">
          <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="../../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 <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>
     <script type="text/javascript">
          //<![CDATA[
          Telerik.Web.UI.Editor.CommandList["InsertSpecialLink"] = function (commandName, editor, args) {
               var elem = editor.getSelectedElement(); //returns the selected element.

               if (elem && elem.tagName == "A") {
                    editor.selectElement(elem);
                    argument = elem.cloneNode(true);
               }
               else {
                    var content = editor.getSelectionHtml();
                    var link = editor.get_document().createElement("A");
                    link.innerHTML = content;
                    argument = link;
               }

               var myCallbackFunction = function (sender, args) {
                    editor.pasteHyperLink(args, "Insert Link");
               }

               editor.showExternalDialog(
            "InsertLink.aspx",
            argument,
            270,
            300,
            myCallbackFunction,
            null,
            "Insert Link",
            true,
            Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
            false,
            true);
          };

          Telerik.Web.UI.Editor.CommandList["PrintPreview"] = function (commandName, editor, args) {
               var args = editor.get_html(true) //returns the HTML of the selection.  

               editor.showExternalDialog(
            "PrintPreview.aspx",
            args,
            570,
            420,
            null,
            null,
            "Print Preview",
            true,
            Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
            true,
            true);
          };

          Telerik.Web.UI.Editor.CommandList["InsertEmoticon"] = function (commandName, editor, args) {
               var myCallbackFunction = function (sender, args) {
                    editor.pasteHtml(String.format("<img src='{0}' border='0' align='middle' alt='emoticon' /> ", args.image));
               }

               editor.showExternalDialog(
            "InsertEmoticon.aspx",
            {},
            400,
            310,
            myCallbackFunction,
            null,
            "Insert Emoticon",
            true,
            Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
            false,
            true);
          };
          //]]>
     </script>
    </form>
</body>
</html>