HTMLEditorExtender Sample Example

1 comment
In this demo, we have using HTMLEditorExtender to create document editor. In this demo we have used one textbox and ajax htmleditorextender control.

HTMLEditorExtender

First, Create a folder where you want to upload images. In this demo we have create folder called images.

Now add below code to create UI of the page. [Default.aspx]

<asp:TextBox ID="txt_editor" runat="server" TextMode="MultiLine" Width="600" Height="350"></asp:TextBox>
        <ajaxToolkit:HtmlEditorExtender ID="HTMLEditorExtender" runat="server" TargetControlID="txt_editor"
            EnableSanitization="false"
            onimageuploadcomplete="HTMLEditorExtender_ImageUploadComplete">
            <Toolbar>
                <ajaxToolkit:Redo />
                <ajaxToolkit:Undo />
                <ajaxToolkit:Bold />
                <ajaxToolkit:Italic />
                <ajaxToolkit:Underline />
                <ajaxToolkit:StrikeThrough />
                <ajaxToolkit:JustifyLeft />
                <ajaxToolkit:JustifyCenter />
                <ajaxToolkit:JustifyRight />
                <ajaxToolkit:JustifyFull />
                <ajaxToolkit:InsertOrderedList />
                <ajaxToolkit:InsertUnorderedList />
                <ajaxToolkit:RemoveFormat />
                <ajaxToolkit:BackgroundColorSelector />
                <ajaxToolkit:ForeColorSelector />
                <ajaxToolkit:FontNameSelector />
                <ajaxToolkit:FontSizeSelector />
                <ajaxToolkit:InsertHorizontalRule />
                <ajaxToolkit:InsertImage />
            </Toolbar>
        </ajaxToolkit:HtmlEditorExtender>

Now add below code to the back-end page. below code for uploading images to folder. [Default.aspx.cs]

protected void HTMLEditorExtender_ImageUploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
    {
        string fullpath = Server.MapPath("~/images/") + e.FileName;
        HTMLEditorExtender.AjaxFileUpload.SaveAs(fullpath);
       
        e.PostedUrl = Page.ResolveUrl("~/images/" + e.FileName);
    }

Demo

HTMLEditorExtender with Upload images

Download Complete Source Code


1 comment:

  1. Its working But when i see this mail in my inbox it displays only the html image tag with the image path.

    Pls help on this issue....

    ReplyDelete