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!

Comments

Rebena (6/23/2009 2:31 PM)

Thanks for the info. I was working on the same issue. My output is similar to yours now, but when I submit the form the updated value in the HTMLEditor is not being reflected back in the form values. The textarea control has the same value as when it was created and there are no other additional fields that contain the updated values that I could pull from. Is this RTE supposed to update the targeted textarea control? Is there a way to get the RTE value in my controller? Thanks in advance.

Gabriel McAdams (2/9/2010 11:35 PM)

I just added a tip to my blog showing how to set the default state of the editor’s toolbar buttons. http://www.thecodepage.com/post/Change-the-default-state-of-an-AJAXControlToolkit-HTMLEditor-Toolbar-Button.aspx