In 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>
Regards
Adarsh
