This article is directed at the Sitecore Intranet Portal, version 3.3, who currently runs on Sitecore 6.3.1. This means that the same functionality would be able to implement on any Sitecore 6.3.1 installations.

We have multiple times wanted to extend the Rich Text Editor with some kind of new functionality. This would typically be adding a button to its toolbars, and creating form that can insert some html. The default Sitecore way to do this create a Sheer UI XAML application in Sitecore, which can be invoked. The problem with Sheer UI is its lackey documentation, and different programming approach contra ASP.NET Web Forms. Fortunately, it is possible to simply create an ASP.NET Web Forms, get it invoked from the Rich Text Editor, and make it call back to the RTE when you are done with your tool. It takes a little javascript and ASP.NET customization.

We need to do the following:

  1. Add a button to the RTE
  2. Add a command to the RTE
  3. Add a custom tool, in an ASP.NET Web Forms.

 

1. Add a button to the RTE

Adding a button to the Rich Text Editor is very simple. You go to the core database, to choose the editor you want to extend (/sitecore/system/Settings/Html Editor Profiles/Rich Text Default/Toolbar 1), I this case it is the default one, and we add the button to toolbar 1. I have called it "Fancy tool". The important field to fill is the "Click" field. This name will be invoked from javascript later.

 

2. Add a command to the Rich Text Editor

When we have created a button in Sitecore, we need to make the RTE aware of the button, and the command we want to execute when it is pushed. This is done by adding the command to the javascript file located at: /sitecore/Shell/controls/Rich Text Editor/RichText command.js.

The file contains all the custom javascript interactions that Sitecore has made to the editor, and it is in this we will add our code.

// Add command to RadEditor
RadEditorCommandList["FancyTool"] = function (commandName, editor, tool) {
    var result = window.showModalDialog("/sitecore modules/shell/fancy tool/fancytool.aspx",
        window,
        "dialogHeight:400px; dialogWidth:600px; edge:raised; center:yes; help:no; resizable:yes; status:no; scroll:no");
    // wait for the window to close, and check if theres a result
    if (result) {
        editor.PasteHtml(result);
    }
}

If you ever tried to make a javascript modal window, you will notice that this is very simply just a javascript modal window, where we listen to the result, for checking what might return from the window.

3. Add a custom tool, in an ASP.NET Web Forms.

The final thing to do is to make your custom Tool. In the javascript for the command, we have added the path for where our tool is located, in our example it is located at /sitecore modules/Shell/fancy tool/fancytool.aspx.

The tool is simply an ASP.NET Web Forms. The trick is to return the some html, which should be inserted in the RTE. This tool will simply insert "Fancy right?" in the editor, when clicking the button.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function insertToRTE() //fires when the Insert Link button is clicked
        {
            var returnValue = "<strong>Fancy right?</strong>";
            window.returnValue = returnValue;
            window.close();
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>Fancy tool</h1>
        <input type="button" value="Submit" onclick="insertToRTE();"/>
    </div>
    </form>
</body>
</html>

So now we have a working flow, which should look a little like this:

 

 

I know it is not as fancy as I named it, but the idea is in place and at Oxygen Software, we do have this code running in production. The trick is simply to generate a chunk of html in your custom tool, it can be whatever you would like.

 

Note: When working with the javascript inside of Sitecore, you will be faced with a caching problem. Sitecore really do not want to release old versions of the javascript files it includes, therefor a good advice is to clear your temporary files, whenever you make a change to the javascript file. Alternatively, you could change the file that includes the JavaScript, to take a random querystring. This can file is located at: /sitecore/Shell/controls/Rich Text Editor/default.aspx. You could change the reference to:

<script type="text/javascript" language="javascript" src="/sitecore/shell/Controls/Rich Text Editor/RichText Commands.js?<%=DateTime.Now.Ticks %>"></script>

That is it! Happy coding :-)