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
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.
The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.