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...
<%@ 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>
Posts
