KB's

How to reuse Sitefinity editor dialogs

As you all may have noticed we use custom dialogs such as the Link Manager, Image Manager, and Documents Manager in Sitefinity rich text editor. These custom dialogs let you insert links from your website site map or add images and documents from your libraries. When you develop custom modules or controls you may wish to add those to your editor in order to reuse this functionality. This article will lead you through the steps you need to take to achieve this.

First you need to add the commands to your editor tools file:
<tools name="InsertToolbar" dockable="false">
  <tool name="LibraryImageManager" text="Insert an image"/>
  <tool name="LibraryDocumentManager" text="Insert a document"/>
  <tool name="LinkManager" text="Insert a link" shortcut="CTRL+K"/>
  ...
</tools>

Then you need to the control template containing your markup and add the following JavaScript code so that your editor is able to utilize the commands you have just added:
     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
<!--
    Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args) {
        var editorArgs = editor.getSelectedElement();
        if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();
 
        var myCallbackFunction = function(sender, args) {
            if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "IMG")
                args.parentNode.replaceChild(editorArgs, args);
            else {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
        }
        var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>';
        editor.showExternalDialog(
   path,
   editorArgs,
   750,
   515,
   myCallbackFunction,
   null,
   'ImageLibraryDialog',
   true,
   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
   false,
   true)
    };
 
    Telerik.Web.UI.Editor.CommandList["LibraryDocumentManager"] = function(commandName, editor, args) {
        var editorArgs = editor.getSelectedElement();
        if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();
 
        var myCallbackFunction = function(sender, args) {
            if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                args.parentNode.replaceChild(editorArgs, args);
            else {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
        }
        var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx") %>';
        editor.showExternalDialog(
   path,
   editorArgs,
   750,
   515,
   myCallbackFunction,
   null,
   'ImageLibraryDialog',
   false,
   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
   false,
   true)
    };
 
    Telerik.Web.UI.Editor.CommandList["LinkManager"] = function(commandName, editor, args) {
        var editorArgs = editor.getSelectedElement();
        if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A") {
            var sel = editor.getSelection();
            editorArgs = sel;
            editorArgs.Html = sel.getHtml();
            editorArgs.Text = sel.getText();
        }
 
        var myCallbackFunction = function(sender, args) {
            if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                args.parentNode.replaceChild(editorArgs, args);
            else {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
 
        }
        var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>';
        editor.showExternalDialog(
   path,
   editorArgs,
   750,
   515,
   myCallbackFunction,
   null,
   'ImageLibraryDialog',
   false,
   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
   false,
   true)
    };
 
    Telerik.Web.UI.Editor.CommandList["SetLinkProperties"] = function(commandName, editor, args) {
        var editorArgs = editor.getSelectedElement();
        if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
            editorArgs = editor.getSelection();
 
        var myCallbackFunction = function(sender, args) {
            if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                args.parentNode.replaceChild(editorArgs, args);
            else {
                var cloned = args.cloneNode(true);
                var div = args.ownerDocument.createElement("DIV");
                div.appendChild(cloned);
                editorArgs.pasteHtml(div.innerHTML);
            }
 
        }
        var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>';
        editor.showExternalDialog(
   path,
   editorArgs,
   750,
   515,
   myCallbackFunction,
   null,
   'ImageLibraryDialog',
   false,
   Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
   false,
   true)
    };
 
    RadEditorCommandList["IncreaseSize"] = function(commandName, editor, oTool) {
        var currentWidth = editor.get_element().style.width; //get the width of Telerik RadEditor
        var currentHeight = editor.get_element().style.height; //get the heigh of Telerik RadEditor
 
        editor.SetSize(currentWidth, currentHeight + 30); //set the height size of the editor to increase with 30px
    };
 
    RadEditorCommandList["DecreaseSize"] = function(commandName, editor, oTool) {
        var currentWidth = editor.get_element().style.width;
        var currentHeight = editor.get_element().style.height;
 
        editor.SetSize(currentWidth, currentHeight - 30); //set the height size of the editor to decrease with 30px
    };
    var oldFunction = Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"]; //save the original Paste function
 
    Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"] = function(commandName, editor, args) {
        oldFunction(commandName, editor, args);
        var bd = document.getElementsByTagName("body")[0];
 
        if (/fullScreenMode/.test(bd.className)) {
            var rep = bd.className.match(' ' + 'fullScreenMode') ? ' ' + 'fullScreenMode' : 'fullScreenMode';
            bd.className = bd.className.replace(rep, '');
 
        } else {
            bd.className += bd.className ? ' ' + 'fullScreenMode' : 'fullScreenMode';
        }
    }
-->
        </script>
    </telerik:RadCodeBlock>

This JavaScirpt code can be found in any of the external templates for creating or editing new content items or in the control template for the Generic Content control.

For more information on creating custom dialogs for the editor you can take a look at the following article: RadEditor: Add Custom Dialogs