ASP.NET HTML Editor - Upload images

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>