Lachlan's Blogzone: May 2010

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

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

    <title></title>

</head>

<body>

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

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

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

        </cc2:ToolkitScriptManager>

    <div>

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

            onclientactivemodechanged="modeChanged" />

    </div>

    <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" />

    </div>

    </form>

    <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").mouseleave(hideImageList);

            $("iframe").mouseover(hideImageList);

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

                var editor = $find('Editor1')

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

                hideImageList();

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

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

                $(this).addClass("ajax__htmleditor_toolbar_button_hover");

            });

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

                $(this).removeClass("ajax__htmleditor_toolbar_button_hover");

            });

        });

        function showImages() {

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

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

            $("#images").slideToggle(100);

        }

        function hideImageList() {

            $("#images").fadeOut(100);

        }

        function modeChanged(e) {

            if (e._activeMode == 0) {

                // show custom buttons

                $(".customButton").show();

            } else {

                $(".customButton").hide();      

            }

        }

    </script>

</body>

</html>

Lachlan's Blogzone

Saturday, 8 May 2010

AJAX Control Toolkit HTMLEditor - buttons with jQuery