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





Prerequisites


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


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

Customization of the Editor





Solution




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








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




<%@ 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


Picture showing the image buttons with spaces in custom HTML editor

Click to Enlarge


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

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250