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