CuteEditor for .NET

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:

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

VB Example:


  1. Dim tc as CuteEditor.ToolControl     
  2. tc = Editor1.ToolControls("insertcustombutonhere")   
  3.      
  4. If Not tc Is Nothing Then  
  5.      Dim Image1 As New System.Web.UI.WebControls.Image()   
  6.      Image1.ToolTip    = "Insert today's date"  
  7.      Image1.ImageUrl    = "tools.gif"  
  8.      Image1.CssClass    = "CuteEditorButton"  
  9.      SetMouseEvents(Image1)   
  10.      Image1.Attributes("onclick")="var d = new Date(); CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,d.toLocaleDateString())"  
  11.      tc.Control.Controls.Add(Image1)   
  12. End If  
2. Add your own custom buttons using the Editor.InsertToolControl method:

C# Example:


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


VB Example:


  1. 'Create the custom button using the Editor.CreateCommandButton method   
  2. Dim ctrl As System.Web.UI.WebControls.WebControl   
  3. ctrl = Editor1.CreateCommandButton("MyButton", "text.gif", "Insert My Custom Text")   
  4. ctrl.Attributes("onclick")="CuteEditor_GetEditor(this).ExecCommand('PasteHTML',false,'<h2>Hello World</h2>')";      
  5.      
  6. 'get the pos after the Italic   
  7. Dim pos As Integer  
  8. pos = Editor1.ToolControls.IndexOf("Italic") + 1   
  9.      
  10. 'add this custom button into the editor   
  11. Editor1.InsertToolControl(pos, "MyButton", ctrl)  
3. Registers a custom button so that it can be used in the template list:

C# Example:


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

VB Example:


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

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


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




© 2003 - 2012 CuteSoft.Net. All rights reserved.