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
Click to Enlarge
- Download AjaxControlToolKit (version 3.5 and above).
- Copy the downloaded AjaxControlToolKit.dll in the bin folder of the project.
- Copy AjaxMin.dll to bin folder as well.
- Install visual studio 2008 (or above) on your machine.
- How to create a web based project in visual studio?
- What is a class?
- How to inherit a class?
- How to override a method?
- What are asp.net AJAX controls?
- How to register a control in an aspx page?
- How to add a web form in web based application in visual studio?
Customization of the Editor
- Add bold, italic and underline buttons in the top tool bar
- Add HTML view and design view buttons in bottom tool bar
- Create a new website (or a web based project).
- Right click on the project and click on ‘Add New item’ option.
- Select "Code file" and set the name as "CustomEditor.cs".
- A class is created as shown in code below.
- Include following name spaces in the class.
- 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
- The two important methods required for customization of HTML Editor are FillTopToolbar() and FillBottomToolbar() method.
- 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
- Inside the FillBottomToolbar() we will write the code to add buttons for HTML view and design view. So the method will be
How to use this control in aspx page
- 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.
- You can now add the editor control as follows
Click to Enlarge