Articles → ASP .NET AJAX → Adding spaces between buttons in ajax HTML editor in C#

Adding spaces between buttons in ajax HTML editor in C#

Objective of this tutorial


Customization of the Editor


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());

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

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

<%@ 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" "">
<html xmlns="">
   <head runat="server">
      <style type="text/css">
         margin-right: 5px !important;
      <form id="form1" runat="server">
         <ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
         <HTMLEditor:CustomEditor ID="editor" runat="server" />


Picture showing the image buttons with spaces in custom HTML editor

Click to Enlarge

Posted By  -  Karan Gupta
Posted On  -  Monday, February 03, 2014


Your Email Id  
Query/FeedbackCharacters remaining 250