Articles → ASP .NET AJAX → Adding Spaces Between Buttons In Ajax HTML Editor In C#

Adding Spaces Between Buttons In Ajax HTML Editor In C#

We have already learnt how to customize AJAX HTML editor using C# and how to add images to the custom editor. In this tutorial, we will move forward and add spaces to the buttons in the AJAX HTML Editor.

Objective Of This Tutorial

The objective of this tutorial is to learn how to add spaces between the buttons in a customized Ajax HTML editor in C#.

Prerequisites

Software

Download AjaxControlToolKit.dll (version 3.5 and above).
Copy the downloaded DLL in the bin folder of the project.
Copy AjaxMin.dll to bin folder as well
Visual studio 2008(or above)

Technical knowledge

In order to understand this tutorial, you have the sound knowledge of the following concepts

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 the aspx page?
How to add a web form in the web based application in the visual studio?
Understanding of the Cascading Style Sheets.
How to customize the Ajax HTML editor?

Customization Of The Editor

In this tutorial, we will add spaces between the buttons in the editor (both in the top and bottom toolbar).

Solution

Before proceeding with the solution, let’s take a look at the code that was written to Customize Ajax HTML editor in C#.

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

namespace MyControls {
	/// <summary>
	/// Summary description for CustomEditor
	/// </summary>
	public class CustomEditor: Editor {
		protected override void FillTopToolbar() {
			TopToolbar.Buttons.Add(new Bold());
			TopToolbar.Buttons.Add(new Italic());
			TopToolbar.Buttons.Add(new Underline());
		}
    //  FillBottomToolbar method to render bottom toolbar in editor
		protected override void FillBottomToolbar() {
			BottomToolbar.Buttons.Add(new DesignMode());
			BottomToolbar.Buttons.Add(new HtmlMode());
		}
	}
}

We are not going to make any changes to the code mentioned above. In order to achieve our goal, we will write the necessary code in the .aspx page.

The default style of the toolbar is such that, the buttons are displayed without any spaces between them. The spaces can be created by using the CSS to override the default style of toolbar.

The following piece of code will insert a space of 5px between the buttons.

<style type="text/css">
   .ajax__htmleditor_toolbar_button
   {
   margin-right: 5px !important;
   }
</style>

The final .aspx page will appear as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Customize.aspx.cs" Inherits="Customize" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %><%@ Register Namespace="MyControls" TagPrefix="HTMLEditor" %>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html
		xmlns="http://www.w3.org/1999/xhtml">
		<head runat="server">
			<title></title>
			<style type="text/css">
         .ajax__htmleditor_toolbar_button
         {
         margin-right: 5px !important;
         }
      </style>
		</head>
		<body>
			<form id="form1" runat="server">
				<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server"></ajax:ToolkitScriptManager>
				<HTMLEditor:CustomEditor ID="editor" runat="server" />
			</form>
		</body></html>

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Monday, February 3, 2014

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**