Adding a custom button to CuteEditor

Last post 03-02-2011, 9:48 AM by Eric. 1 replies.
Sort Posts: Previous Next
  •  03-02-2011, 6:50 AM 66507

    Adding a custom button to CuteEditor

    Hey everyone,
     
    I'd like to create a "dailymotion" button with the same behaviour than the Youtube one. The idea is to open the youtube.aspx page when clicking on my new button.
    Can you tell me the easiest way to do that?
     
    Thank you,
     
    Romain
  •  03-02-2011, 9:48 AM 66511 in reply to 66507

    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 as RSS news feed in XML