Add Your Own Custom Buttons

You can easily add your own custom buttons to the CuteEditor toolbar using the following methods:

1: Add your own custom buttons into the custom button holder:

C# Example:


  CuteEditor.ToolControl tc = Editor1.ToolControls["insertcustombutonhere"];
  if(tc!=null)
  {    
     System.Web.UI.WebControls.Image Image1 = new System.Web.UI.WebControls.Image ();
     Image1.ToolTip    = "Insert today's date";
     Image1.ImageUrl    = "tools.gif";
     Image1.CssClass    = "CuteEditorButton";
     SetMouseEvents(Image1);
     Image1.Attributes["onclick"]="var d = new Date(); CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,d.toLocaleDateString())";
     tc.Control.Controls.Add(Image1);
  }

VB Example:

Dim tc as CuteEditor.ToolControl

  tc = Editor1.ToolControls("insertcustombutonhere")

  If Not tc Is Nothing Then
   Dim Image1 As New System.Web.UI.WebControls.Image()
    Image1.ToolTip    = "Insert today's date"
    Image1.ImageUrl    = "tools.gif"
    Image1.CssClass    = "CuteEditorButton"
    SetMouseEvents(Image1)
    Image1.Attributes("onclick")="var d = new Date(); CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,d.toLocaleDateString())"
    tc.Control.Controls.Add(Image1)
  End If

2: Add your own custom buttons using the Editor.InsertToolControl method:

C# Example:

 // Create the custom button using the Editor.CreateCommandButton method
 //Themes/%ThemeName%/Images/text.gif
 WebControl ctrl=Editor1.CreateCommandButton("MyButton","text.gif","Insert My Custom Text");
 ctrl.Attributes["onclick"]="CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,'<h2>Hello World</h2>')";
 
 //get the pos after the Italic
 int pos=Editor1.ToolControls.IndexOf("Italic")+1;

 //add this custom button into the editor
 Editor1.InsertToolControl(pos,"MyButton",ctrl);

VB Example:

'Create the custom button using the Editor.CreateCommandButton method
Dim ctrl As System.Web.UI.WebControls.WebControl
  ctrl = Editor1.CreateCommandButton("MyButton", "text.gif", "Insert My Custom Text")
  ctrl.Attributes("onclick")="CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,'<h2>Hello World</h2>')";

'get the pos after the Italic
Dim pos As Integer
  pos = Editor1.ToolControls.IndexOf("Italic") + 1

'add this custom button into the editor
  Editor1.InsertToolControl(pos, "MyButton", ctrl)

3: Registers a custom button so that it can be used in the template list:

C# Example:

 // Create the custom button using the Editor.CreateCommandButton method
 //Themes/%ThemeName%/Images/text.gif
 WebControl ctrl=Editor1.CreateCommandButton("MyButton","text.gif","Insert My Custom Text");
 ctrl.Attributes["onclick"]="CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,'<h2>Hello World</h2>')"; 

    //register the custom button
  Editor1.RegisterCustomButton("mybutton",ctrl);

VB Example:

'Create the custom button using the Editor.CreateCommandButton method
Dim ctrl As System.Web.UI.WebControls.WebControl
  ctrl = Editor1.CreateCommandButton("MyButton", "text.gif", "Insert My Custom Text")
  ctrl.Attributes("onclick")="CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,'<h2>Hello World</h2>')"

'register the custom button
  Editor1.RegisterCustomButton("mybutton",ctrl)

Now you can use the custom button in the template list:

<CE:EDITOR id="Editor1" runat="server" TemplateItemList="[Bold,Italic]/[mybutton]">

Send comments on this topic.