ASP.NET - How can I customize the ICONS for the AJAX HTMLEditor control toolbar

Asked By Romel Evans on 13-Nov-11 12:42 AM
I would like to change the default AJAX Editor Control toolbar icons to my own flat style icons.  Is there a convenient css class I can use to point to my icons?

Thanks,
  Romel Evans
Suchit shah replied to Romel Evans on 13-Nov-11 01:04 AM
The control allows a good deal of customization.  By modifying the CSS stylesheet, you can change the look and feel of the editor.  By creating your own editor class and inheriting the editor control, you can specify which toolbar buttons should be available, and which panes to enable.  Unfortunately, you can’t easily change the state of a toolbar button on startup. if it were possible to pre-set the ‘right to left direction’ toggle button from the server.  The control’s server-side properties do not allow this, but I was able to help him find a solution
http://www.thecodepage.com/post/Change-the-default-state-of-an-AJAXControlToolkit-HTMLEditor-Toolbar-Button.aspx

   {
        AjaxControlToolkit.HTMLEditor.ToolbarButton.MethodButton btn=new AjaxControlToolkit.HTMLEditor.ToolbarButton.MethodButton();
        btn.NormalSrc= "aa.jpg";
        btn.Attributes.Add("onclick", "alert('a');");
        TopToolbar.Buttons.Add(btn);
      }
Download Change Set #54501 from http://ajaxcontroltoolkit.codeplex.com/SourceControl/ListDownloadableCommits.aspx .
Not a good idea to create custom buttons this way...

See the new example: /SampleWebSite/HTMLEditor/OtherSamples/EditorWithCustomButtons_1.aspx .
Also see: /SampleWebSite/App_Code/HTMLEditor.Samples.cs,
/SampleWebSite/App_Code/HTMLEditor.CustomButtonsAndPopups.cs .
There are new folders: /SampleWebSite/App_Scripts and /SampleWebSite/App_Images .
Refrence : http://forums.asp.net/t/1432800.aspx/1?anyone+got+AjaxControlToolKit+HTML+Editor+to+work+with+an+image+button+changes




Kirtan Patel replied to Romel Evans on 13-Nov-11 02:04 AM
to do that you have do many things including creating and finding new icons to replace the old one writing CSS to accommodate the changes but i have one clean solution to your problem 

you can use FreeTextBox control which is having same kind of design what you want and also its Free One

http://freetextbox.com/


Devil Scorpio replied to Romel Evans on 13-Nov-11 03:04 AM
Hi,

add a Custom Button image on TopToolBar of HTML Editor

As to the new AjaxControlToolkit control HTML Editor, if some one wants to add a custom button onto TopToolBar of Editor and do some custom code, you can add a MethodButton and define client-side onclick to do script. It's no way to define server-side onclick of it. However, you can build a doPostBack functionality on client if you'd like to do onclick on the server-side.

Code:-
public class CustomEditor : AjaxControlToolkit.HTMLEditor.Editor
{
public CustomEditor()
{
//
// TODO: Add constructor logic here
//
}

protected override void FillTopToolbar()
{
//base.FillTopToolbar();

AjaxControlToolkit.HTMLEditor.ToolbarButton.MethodButton btn=new AjaxControlToolkit.HTMLEditor.ToolbarButton.MethodButton();
btn.NormalSrc= "aa.jpg";
btn.Attributes.Add("onclick", "alert('a');");
TopToolbar.Buttons.Add(btn);

}
}
dipa ahuja replied to Romel Evans on 13-Nov-11 06:11 AM
You can change the editor icons by customizing the Ajax's HtmlEditor control this way:

using AjaxControlToolkit.HTMLEditor;
 
namespace MyControls
{
  public class CustomEditor : Editor
  {
    public CustomEditor()
    {
    }
    protected override void FillBottomToolbar()
    {
      BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode());
      BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode());
      BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.HtmlMode());
    }
    protected override void FillTopToolbar()
    {
      TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold());
      TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic());
    }
  }
}

Now to use this control in aspx page:
<%@ Register namespace="MyControls" tagprefix="custom" %>


<custom:CustomEditor ID="CustomEditor1"
Width="500px" Height="200px" runat="server" />