One of my cohorts recently posed a great question: How hard would it be to customize the hyperlink manager dialog in Sitecore’s rich text editor?
While there is a well established protocol for creating a completely custom dialog, customizing one of the built-in dialogs was not something I had seen before. Of course, I couldn’t let the question go unanswered.
Video 1 - Overview: Customizing Sitecore’s Hyperlink Manager
Video 2 – Bonus! Customizing the Hyperlink Manger for Google Analytics Event Tracking
Initially, it seemed that it would be rather difficult to customize those dialogs. The dialogs consist of window chrome wrapped around an iframe. The page hosted in the iframe is actually an HTTP handler that dynamically loads the appropriate controls based on query string parameters that are passed to it. The control classes and even the user controls that define the markup of the dialogs are embedded in the assembly.
Wait… User controls? Why would they use user controls unless they wanted to let you modify the markup? A little Googling reveals that, normally, the RadEditor is shipped with a folder full of user controls. Unfortunately, Sitecore decided not to include those files with their product. So, once again, it’s Reflector to the rescue.
If you open the Telerik.Web.UI.dll assembly in reflector, you can browse the embedded resources. Expand the Telerik.Web.UI node and the resources folder below it and a short way down the list you will find a bunch of items named something like Telerik.Web.UI.Editor.DialogControls.DialogName.ascx. These resources contain the user control markup for all of the RadEditor’s built-in dialogs. In our case we want to customize the hyperlink manager dialog, so we right click the Telerik.Web.UI.Editor.DialogControls.LinkManager.ascx resource and choose “Save As…” from the context menu.
A good place for this user control is going to be with the rest of the Rich Text Editor files. I chose to create a Dialogs folder within the /sitecore/shell/Controls/Rich Text Editor folder, but as long as you put it somewhere under the web root, it will work. If you develop outside the Sitecore installation and use build scripts or TDS to copy files over, you will want to put it somewhere in your Web application project folder structure and then include it in your project. Be sure to remove the “Telerik.Web.UI.DialogControls” from the name and just save it as “LinkManager.ascx” in which ever folder you choose.
Now that you have extracted your user control from the assembly, you have to let the editor know where to find it. In Sitecoe 6.4.0 and later, you need to edit the /sitecore/shell/controls/rich text editor/EditorPage.aspx file. We need to add a ExternalDialogsPath attribute to the <telerik:RadEditor> tag and set its value to the path of the folder where we saved the LinkManager.ascx user control file.
From here, you just need to modify the user control file to suit your needs. In my case, I wanted to add a Body field to the E-mail tab of the hyperlink manager dialog. This would allow content authors to create email links that started the user off with a standard message in the body of the email. Conveniently, this customization is simple enough to describe in a blog post.
The First step is to create the markup for the field. I just copied the table row for the subject field and pasted it below. Then, I changed the label text and changed the <input type=”text”> tag to a <textarea> tag.
1. Add a member to hold a reference to the textarea:
2. Clear the field when the dialog opens:
3. Parse the current link for existing values:
4. Build the new link href from the form values: