n this article we are seen how to create a custom HTML Editor control to add image button in it.

Create A Class

———–CustomEditor.cs——————

Add Name Space

using AjaxControlToolkit.HTMLEditor;

namespace MyControls

{

public class CustomEditor : Editor

{

private static int _editorBlogID = -1;

public static  int EditorBlogID

{

get

{

return _editorBlogID;

}

set

{

_editorBlogID = value;

}

}

protected override void FillTopToolbar()

{

TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold());

TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic());

TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Copy());

TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Cut());

TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Paste());

TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Redo());

AjaxControlToolkit.HTMLEditor.ToolbarButton.MethodButton btn = new AjaxControlToolkit.HTMLEditor.ToolbarButton.MethodButton();

btn.NormalSrc = “images/ed_upload_image_n.gif”;

btn.ID = “btnUplaodImg”;

btn.Attributes.Add(“onclick”, “show();”);

//this method show() is calling from  user control where we add the reference

TopToolbar.Buttons.Add(btn);

}

protected  override void FillBottomToolbar()

{

BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode());

BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode());

}

}

}

Create User Control Editor.ascx

Add Namespace on page

<%@ Register Namespace=”MyControls” TagPrefix=”custom” %>

Add Customize Editor to aspx page

//this is custtom editor

<custom:CustomEditor ID=”cEditor” Width=”650px” Height=”600px” runat=”server” />

//this is used for image uplload

<div id=”dv” style=”position: absolute; background-color: Gray; padding: 10px; display: none;”

runat=”server”>

<asp:AsyncFileUpload ID=”FileUploadControl” runat=”server” Style=”display: none”

Width=”300px” />

<asp:Button ID=”btnUpload” runat=”server” Text=”Upload” Style=”display: none” OnClick=”btnUpload_Click” />

<asp:Button ID=”btnCancel” runat=”server” Text=”Cancel” Style=”display: none” OnClientClick=”hide();” />

</div>

<script language=”javascript” type=”text/javascript”>

function show()

{

document.getElementById(“<%=dv.ClientID%>”).style.display=”;

document.getElementById(“<%=FileUploadControl.ClientID%>”).style.display=”;

document.getElementById(“<%=btnUpload.ClientID%>”).style.display=”;

document.getElementById(“<%=btnCancel.ClientID%>”).style.display=”;

showFloatDiv();

}

function hide()

{

document.getElementById(“<%=dv.ClientID%>”).style.display=”none”;

document.getElementById(“<%=FileUploadControl.ClientID%>”).style.display=”none”;

document.getElementById(“<%=btnUpload.ClientID%>”).style.display=”none”;

document.getElementById(“<%=btnCancel.ClientID%>”).style.display=”none”;

}

function showFloatDiv()

{

if (!e) {

var e = window.event || arguments.callee.caller.arguments[0];

}

var scrolledV = scrollV();

var scrolledH = (navigator.appName == ‘Netscape’) ? document.body.scrollLeft : document.body.scrollLeft;

tempX = (navigator.appName == ‘Netscape’) ? e.clientX : event.clientX;

tempY = (navigator.appName == ‘Netscape’) ? e.clientY : event.clientY;

document.getElementById(“<%=dv.ClientID%>”).style.left = (tempX + scrolledH) + ‘px’;

document.getElementById(“<%=dv.ClientID%>”).style.top = (tempY + scrolledV) + ‘px’;

document.getElementById(“<%=dv.ClientID%>”).style.display = “”;

}

function scrollV()

{

var scrolledV;

if (window.pageYOffset) {

scrolledV = window.pageYOffset;

}

else if (document.documentElement && document.documentElement.scrollTop) {

scrolledV = document.documentElement.scrollTop;

}

else if (document.body) {

scrolledV = document.body.scrollTop;

}

return scrolledV;

}

</script>