Re: Adding a custom button to CuteEditor

  •  03-02-2011, 9:48 AM

    Re: Adding a custom button to CuteEditor

    Dear Romain,
     
    Jeffery135's solution works fine, you can also try the following snippet:

    <%@ Page Language="C#"%>
    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <html>
        <head> 
     </head>
     <body>
            <form id="Form1" runat="server">   
       <table cellpadding="15">
        <tr>     
         <td>
          <h1>Add custom buttons</h1>
          <p>This example shows you how easy it can be to <b>add your own functions</b> to the CuteEditor with the help of CuteEditor extended functionalities. </p>
          <br />
          <CE:Editor id="Editor1" Height="200" runat="server" TemplateItemList="Bold,Italic,Underline,JustifyLeft,JustifyCenter,JustifyRight,InsertUnorderedList,Separator,Indent, Outdent, insertcustombutonhere"></CE:Editor><br />       
          
         </td>
        </tr>
       </table>   
      </form>
     </body>
    </html>

    <script runat="server">
     void Page_Load(object sender, System.EventArgs e)
     {
      CuteEditor.ToolControl tc = Editor1.ToolControls["insertcustombutonhere"];
      if(tc!=null)
      {
        
       System.Web.UI.WebControls.Image Image2 = new System.Web.UI.WebControls.Image();
       Image2.ToolTip    = "Using oncommand";
                Image2.ImageUrl = "~/CuteSoft_Client/CuteEditor/Images/youtube.gif";
       Image2.CssClass    = "CuteEditorButton";
       SetMouseEvents(Image2);
       Image2.Attributes["Command"]="MyCmd";
       tc.Control.Controls.Add(Image2);
       
       //Editor1.AddToolControl("CustomPostBack",postbutton);
      }
     }
     
     void SetMouseEvents(WebControl control)
     {
      control.Attributes["onmouseover"]="CuteEditor_ButtonCommandOver(this)";
      control.Attributes["onmouseout"]="CuteEditor_ButtonCommandOut(this)";
      control.Attributes["onmousedown"]="CuteEditor_ButtonCommandDown(this)";
      control.Attributes["onmouseup"]="CuteEditor_ButtonCommandUp(this)";
      control.Attributes["ondragstart"]="CuteEditor_CancelEvent()";
     } 

    </script>

    <script language="JavaScript" type="text/javascript" >
      var editor1=document.getElementById("<%=Editor1.ClientID%>");
      
      function CuteEditor_OnCommand(editor,command,ui,value)
      {
       //handle the command by yourself
       if(command=="MyCmd")
       {
        editor.ExecCommand("youtube");
        return true;
       }
      }
    </script>

     
    Thank you for asking
View Complete Thread