On Using the New Ajax Control Toolkit Html Editor

This announcement by Bertrand Le Roy on some new Ajax Control Toolkit controls was a nice bit of news to me the other day. One thing I was looking for was a new Html editor...great timing! Tonight I set out to implement it in one of my MVC projects.

Since I was doing this in an MVC project, the client-side only mode was the one for me. So I went to the downloads and downloaded the script files only version. As I tried to use the downloaded code and the example, problems ensued. The sample referenced several files and folders that did not exist in this source drop at all, and the javascript attempted to instantiate an object that had not been defined. Doh! Being a nice little boy, I left a note on the issue tracker for the project.

So I downloaded the source download and tried again. Things were much better this time, but some changes still needed to be made. All of the files referenced in the sample existed, but not at their specified paths. After some renaming and repathing, I managed to get it to work. Woot! Here are the changes to the js references and code I made to get the widget working (pardon the bad line breaks):

<script src="/Scripts/AjaxControlToolkit/Common/Common.js" type="text/javascript"></script>
<script src="/Scripts/AjaxControlToolkit/ExtenderBase/BaseScripts.js" type="text/javascript"></script>
<script src="/Scripts/AjaxControlToolkit/HtmlEditor/AjaxControlToolkit.HTMLEditor.ClientSideEditor.js" type="text/javascript"></script>
<script src="/Scripts/AjaxControlToolkit/DynamicPopulate/DynamicPopulateBehavior.js" type="text/javascript"></script>
<link href="/Scripts/AjaxControlToolkit/HTMLEditor/Editor.css" rel="stylesheet" type="text/css" />

    Sys.Application.add_init(function()
    {
        $create(AjaxControlToolkit.HTMLEditor.ClientSideEditor,
            {

                imagesPath: "/Scripts/AjaxControlToolkit/HtmlEditor/Images/",
                popupCss: "/Scripts/AjaxControlToolkit/HtmlEditor/Popups/AttachedTemplatePopup.css",
                designPanelCss: "/Scripts/AjaxControlToolkit/HtmlEditor/DesignPanel.css",
                documentCss: "/Scripts/AjaxControlToolkit/HtmlEditor/Document.css"
            },
            null, null, $get("ReviewText"));
    });

It is now working. The only odd thing about it so far is that changing the view mode (wysiwyg/html) causes a page reload.

I hope some of you out there find this useful. Good luck!