More in this section

Forums / Developing with Sitefinity / Adding Custom Dialog to RadEditor

Adding Custom Dialog to RadEditor

2 posts, 1 answered
  1. Christine
    Christine avatar
    5 posts
    Registered:
    08 Jan 2010
    06 May 2010
    Link to this post
    I am attempting to add a custom dialog to the Generic Content RadEditor control for adding a special link.  I have read the articles about adding custom dialogs here and here, but am still having some difficulty.

    First I created the dialog page ~/Sitefinity/UserControls/Dialogs/AnchorLink.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AnchorLink.aspx.cs" Inherits="Sitefinity_UserControls_Dialogs_AnchorLink" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
    <title>Insert a Named Anchor Link</title>
    <link type="text/css" rel="stylesheet" href="~/Sitefinity/UserControls/Dialogs/CustomDialogs.css" />
    <link type="text/css" rel="stylesheet" href="~/Sitefinity/UserControls/Dialogs/RadControlsSkins.css" />
    <link type="text/css" rel="stylesheet" href="~/Sitefinity/Admin/Themes/Default/CustomDialogs.css" />
    <link type="text/css" rel="stylesheet" href="~/sitefinity/admin/Themes/Default/RadControlsSkins.css" />
    </head>
    <body>
    <form id="form1" runat="server">
      <div class="ctrlProps" id="div1">
        <div class="ctrlContent">
          <div class="uploadPane">
            <p class="mand">* Mandatory fields</p>
            <h2>Insert a named anchor link</h2>
            <div  class="dialogBox">
               <fieldset style="width: 214px; height: 192px">
                   * Link name: <input type="text" id="linkName"><br/>      
               </fieldset>
              <p id="actionButtons" class="button_area bottom">
                <a href="#" onclick="insertLink();" style="display: block; " class="CmsButLeft ok" id="submitBtnEnabled"><strong class="CmsButRight light">Insert</strong></a>
                <span class="cmsorlbl"> or </span>
                <a href="#" onclick="getRadWindow().close();" class="cmscclcmd">Cancel</a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <script type="text/javascript">
          var linkName = document.getElementById("linkName");
           
          function getRadWindow() {
              if (window.radWindow) {
                  return window.radWindow;
              }
              if (window.frameElement && window.frameElement.radWindow) {
                  return window.frameElement.radWindow;
              }
              return null;
          }
           
          function insertLink()
          {
              getRadWindow().close("<a name=\"" + linkName.innerHTML + "\"></a>");
          }
       </script>
    </form>
    </body>
    </html>

    Then I added a reference to to custom dialog in the  ~/Sitefinity/Admin/ControlTemplates/Generic_Content/ContentEditView.ascx:
    Telerik.Web.UI.Editor.CommandList["AnchorLink"] = function(commandName, editor, args) {
                              var editorArgs = editor.getSelectedElement();
                                    var myCallbackFunction = function(sender, args) {
                                        editor.pasteHtml(args);
                                    }
                                    editor.showExternalDialog(
                                    '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/AnchorLink.aspx") %>',
                                    editorArgs,
                                    750,
                                    515,
                                    myCallbackFunction,
                                    null,
                                    'AnchorLink',
                                    false,
                                    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                                    false,
                                    false)
                                };

    Then I mapped the control template in ~/App_Data/Configuration/Telerik.Sitefinity.Configuration.ControlsConfig.xml:
    <?xml version="1.0" encoding="utf-8"?> 
    <controlsConfig
      <viewMap>    
        <!--Provides user interface for editing a content item in the Generic Content module.-->
        <viewSettings hostType="Telerik.Cms.Engine.WebControls.Admin.ContentItemEdit`1[[Telerik.Cms.Engine.WebControls.Admin.ContentItemsView, Telerik.Cms.Engine]]" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Generic_Content/ContentEditView.ascx" />
      </viewMap
    </controlsConfig>

    Then I added the new tool to ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml:
    <tool name="AnchorLink" text="Insert a named anchor link" />

    I also added the button style to my CSS file:
    .AnchorLink, .reToolbar.Default .AnchorLink
    {
        background-image: url(images/InsertAnchor.gif) !important;
    }

    Then I restarted IIS. 

    I performed all the actions described above, and I do see the new icon on the editor for the Generic Content control.  However, when I click on the new icon, I get the following popup message: 'The command AnchorLink is not implemented yet.' (see attached).

    Am I missing something?

    Thanks for your help!
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    06 May 2010
    Link to this post
    Hello Christine,

    The template you have mapped - ~/Sitefinity/Admin/ControlTemplates/Generic_Content/ContentEditView.ascx is used when you edit an content item through GenericContent module, since the screenshot shows GenericContent control which uses different template - GenericContentDesigner.ascx which should be mapped as shown below

    <viewSettings hostType="Telerik.Cms.Engine.WebControls.Design.GenericContentDesigner"
                      layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx" />


    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
    Answered
2 posts, 1 answered