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

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.

public class CustomEditor {}




5. Include following name spaces in the class.

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




6. 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
You can inherit class with Editor in the following manner:



public class CustomEditor : Editor{ }




7. The two important methods required for customization of HTML Editor are FillTopToolbar() and FillBottomToolbar() method.
In order to achieve our first goal of having bold, italic and underline buttons in the top tool bar we require to override the following function



protected override void FillTopToolbar(){}



For our second requirement of having HTML view and design view buttons in bottom tool bar we require to override the following function



protected override void FillBottomToolbar(){}




8. 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

protected override void FillTopToolbar() {
  TopToolbar.Buttons.Add(new Bold());
  TopToolbar.Buttons.Add(new Italic());
  TopToolbar.Buttons.Add(new Underline());
}




9. 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.

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



In namespace attribute we will specify "MyControls" as value because inside this namespace we have created the CustomEditor class. Once the user control has been registered it can be accessed by the .aspx page by the name specified (as shown in step 3).

When you use a @ Register directive for referring a control, you can place your code for the control in the application's App_Code folder so that it can be dynamically compiled at run time. This simplifies the development process. Also, when you place the source code in the App_Code folder you need not define the assembly attribute for the @ Register directive.


2. 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.

<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
</ajax:ToolkitScriptManager>




3. You can now add the editor control as follows

<HTMLEditor:CustomEditor ID="editor" runat="server" />