Articles → ASP .NET AJAX → Customize Ajax HTML editor in C#

Customize Ajax HTML editor in C#






Why customization of AJAX HTML editor is required?





Objective of This Tutorial





The HTML Editor




Picture showing different parts of the Ajax HTML editor

Click to Enlarge


Prerequisites




  1. Download AjaxControlToolKit (version 3.5 and above).
  2. Copy the downloaded AjaxControlToolKit.dll in the bin folder of the project.
  3. Copy AjaxMin.dll to bin folder as well.
  4. Install visual studio 2008 (or above) on your machine.




  1. How to create a web based project in visual studio?
  2. What is a class?
  3. How to inherit a class?
  4. How to override a method?
  5. What are asp.net AJAX controls?
  6. How to register a control in an aspx page?
  7. How to add a web form in web based application in visual studio?

Customization of the Editor




  1. Add bold, italic and underline buttons in the top tool bar
  2. Add HTML view and design view buttons in bottom tool bar

Solution




  1. Create a new website (or a web based project).
  2. Right click on the project and click on ‘Add New item’ option.
  3. Select "Code file" and set the name as "CustomEditor.cs".
  4. A class is created as shown in code below.
  5. public class CustomEditor {}


  6. Include following name spaces in the class.
  7. using AjaxControlToolkit.HTMLEditor;
    using AjaxControlToolkit.HTMLEditor.ToolbarButton;


  8. In order to customize the toolbar buttons, you will have to derive a new HTML Editor from the base Editor class so that you can access the necessary functions required for customization of HTML Editor


  9. public class CustomEditor : Editor{ }


  10. The two important methods required for customization of HTML Editor are FillTopToolbar() and FillBottomToolbar() method.


  11. protected override void FillTopToolbar(){}




    protected override void FillBottomToolbar(){}


  12. In order to accomplish our first goal, we will have to add buttons for bold, italic and underline by adding the following lines of code in the FillTopToolbar() function
  13. protected override void FillTopToolbar() {
      TopToolbar.Buttons.Add(new Bold());
      TopToolbar.Buttons.Add(new Italic());
      TopToolbar.Buttons.Add(new Underline());
    }


  14. Inside the FillBottomToolbar() we will write the code to add buttons for HTML view and design view. So the method will be
protected override void FillBottomToolbar() {
  BottomToolbar.Buttons.Add(new DesignMode());
  BottomToolbar.Buttons.Add(new HtmlMode());
}




using AjaxControlToolkit.HTMLEditor;
using AjaxControlToolkit.HTMLEditor.ToolbarButton;

namespace MyControls {
  public class CustomEditor: Editor {
    protected override void FillTopToolbar() {
      TopToolbar.Buttons.Add(new Bold());
      TopToolbar.Buttons.Add(new Italic());
      TopToolbar.Buttons.Add(new Underline());
    }

    protected override void FillBottomToolbar() {
      BottomToolbar.Buttons.Add(new DesignMode());
      BottomToolbar.Buttons.Add(new HtmlMode());
    }
  }
}





How to use this control in aspx page




  1. Use @Register directive to register the required user defined control on a web form. This directive forms a connection between a tag prefix and a custom control. The following line of code creates an association between "MyControls" and "HTMLEditor". Add the following tag for registering the control.
  2. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>






  3. Add a tool kit script manager tag on the page. This is very important. ToolKitScriptManager handles all JavaScript scripts for partial page rendering to update your server controls without refreshing the page. It is mandatory for this control to be present in order to make ajax controls work.
  4. <ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
    </ajax:ToolkitScriptManager>


  5. You can now add the editor control as follows
<HTMLEditor:CustomEditor ID="editor" runat="server" />




Picture showing the customized editor in asp.net ajax

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Saturday, May 14, 2011
 
Updated On  -  Tuesday, January 21, 2014

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250