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>


 


 


Tuesday 2 February 2010

Online Javascript Hex viewer - Local

Check it out, similar functionality to XVI32, but written entirely in Javascript. Uses new HTML5 methods to access local files, so no transfer of data to the server necessary. No easy means of writing file back to disk via Javascript yet, so view only for now, no edit :(

Unfortunately only works on Firefox 3 at the moment, but expect other browsers will adopt these standards reasonably quickly.

Can be a bit slow on old computers...