Post
Ask Question

AJAX HtmlEditorExtender

About HtmlEditorExtender

This Ajax tool enables standard ASP.NET Text-Box control with support for rich formatting. This is a very lightweight tool and compatible with Internet Explorer, Mozilla Firefox, Google Chrome and Apple Safari. It has a toolbar also and we can set its property as we want.

Properties of HtmlEditorExtender Toolbar

This tool has many properties as follows. This TextBox provides support of rich formatting.

  1. Undo and Redo
  2. Bold, Italic, Underline, Strikethrough, Subscript,Subscript, Superscript
  3. Justify Left, Justify Right, Justify Center and Justify Full
  4. Ordered and Unordered list
  5. Create Link and Unlink
  6. Remove Format
  7. Select all and Unselect
  8. Delete, Cut, Copy and Paste
  9. Background color selection, Fore color selector, Font Name selector and Font size selector
  10. Indent and Outdent line
  11. Insert horizontal Rule and horizontal separator
  12. Insert image

Events of HtmlEditorEntender

The event "ImageUploadComplete" occurs when an image is uploaded successfully. In this event an instance of AjaxFileUplodEventArgs is passed in the argument that contains the file name, size of the file, and file type.

Properties

  • TargetControlId: In this we provide the id of the TextBox.
  • Toolbar: By using this you can modify the toolbar of the HTML Editor Extender.
  • DisplaySourceTab: It can be true or false; if it is true then you will see source code in HTML format on source view.

How to use it?

The following is the procedure to use HtmlEditorExtender in ASP.NET.

  1. First of all download AjaxToolKit4.1.rar from the following link if you don't yet have it:

    http://www.mediafire.com/download/k7zacicqhudwldf/AjaxToolKit4.1.rar
     
  2. Open Visual Studio 2010.
  3. Then click on "File" > "New" > "Web Site…" ( or press "Shift + Alt + N").

    1.png

  4. Then select ASP.NET Empty Web Site.

    2.png

  5. Now go into the Solution Explorer and "Add Reference" of the downloaded "AjaxControlToolkit.dll" file.
  6. Now add the following line:
     

    <%@Register Assembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%>


    Before this

    <!DOCTYPEhtml PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  7. Add Script Manager inside the "form tag".
     

    <htmlxmlns="http://www.w3.org/1999/xhtml">

    <headid="Head1"runat="server">

       <title></title>

    </head>

    <body>

       <formid="form1"runat="server">

       <div>

           <cc1:toolkitscriptmanagerrunat="server"id="scriptmanager1"/>

       </div>

       </form>

    </body>

    </html>
     

  8. Now add a TextBox using the following code.

     <asp:TextBox runat="server" Columns="80" Rows="20" id="txtBody"TextMode="MultiLine"></asp:TextBox>
     
  9. Now after writing this code, add a "HtmlEditorExtender" with a "Toolbar" that has some properties using the following code.
     

    <cc1:htmleditorextenderid="htmleditor"targetcontrolid="txtBody"runat="server">

         <Toolbar>

                 <cc1:Undo/>

                 <cc1:Redo/>

                 <cc1:Bold/>

                 <cc1:Italic/>

                 <cc1:Underline/>

                 <cc1:StrikeThrough/>

                 <cc1:Subscript/>

                 <cc1:Superscript/>

                 <cc1:JustifyLeft/>

                 <cc1:JustifyCenter/>

                 <cc1:JustifyRight/>

                 <cc1:JustifyFull/>

                 <cc1:InsertOrderedList/>

                 <cc1:InsertUnorderedList/>

                 <cc1:CreateLink/>

                 <cc1:UnLink/>

                 <cc1:RemoveFormat/>

                 <cc1:SelectAll/>

                 <cc1:UnSelect/>

                <cc1:Delete/>

                 <cc1:Cut/>

                 <cc1:Copy/>

                 <cc1:Paste/>

                 <cc1:BackgroundColorSelector/>

                 <cc1:ForeColorSelector/>

                 <cc1:FontNameSelector/>

                 <cc1:FontSizeSelector/>

                 <cc1:Indent/>

                 <cc1:Outdent/>

                 <cc1:InsertHorizontalRule/>

                 <cc1:HorizontalSeparator/>

          </Toolbar>

     </cc1:htmleditorextender>
     

  10. Now run the program; its output will be as follows:

    3.png


Similar Articles