Saturday, 8 May 2010

AJAX Control Toolkit HTMLEditor - buttons with jQuery

Have you tried adding buttons to the toolbar of the HTML Editor in the Ajax Control Toolkit? If so, you will know it is a "mission". I gave up and built my own with jQuery. To use, just add your own buttons to the "images" div...

Hopefully modifying the script for your own purposes is relatively painless; I think the code is mostly self-documenting??

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="HTMLEditorButtons.aspx.vb" Inherits="Foo.HTMLEditorButtons" %>


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc2" %>


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"

    TagPrefix="cc1" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">


<html xmlns="" >

<head id="Head1" runat="server">





    <script src="../Script/jquery-1.3.2.js" type="text/javascript"></script>

    <form id="form1" runat="server">

        <cc2:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">



        <cc1:Editor ID="Editor1" runat="server" Height="400px"

            onclientactivemodechanged="modeChanged" />




    <div id=images style="display: none; position: absolute; border: solid 1px black; background-color: White; overflow: scroll; cursor: hand;height: 150px; width:80px ">

        <img src="../Images/Stuffed_Folder.png" /><br />

        <img src="../Images/User_Complete.gif" /><br />

        <img src="../Images/Move.gif" /><br />

        <img src="../Images/help.gif" />






    <script language=javascript>

        $(document).ready(function() {


            $(".ajax__htmleditor_editor_toptoolbar > div").append('<img class="ajax__htmleditor_toolbar_button customButton" title="Images" id="btnImages" alt="" src="../images/picture.png" onclick="showImages()" />');







            $("#images img").click(function(e) {

                var editor = $find('Editor1')

                editor._editPanel._modePanels[0].insertHTML("<img src='" + $(this).attr("src") + "' />");


            }).css("cursor", "pointer");


            $(".customButton").mouseenter(function() {




            $(".customButton").mouseleave(function() {






        function showImages() {

            var imgPos = $("#btnImages").offset();

            $("#images").css("top", + 23).css("left", imgPos.left);





        function hideImageList() {





        function modeChanged(e) {

            if (e._activeMode == 0) {

                // show custom buttons


            } else {