Support forums » Products » Cute Editor for .NET » Re: Can i able to open popup window custom control click?

Re: Can i able to open popup window custom control click?

  •  11-15-2009, 9:42 PM

    Re: Can i able to open popup window custom control click?

    Reply Quote
    Hi JJoyce,
     
    Example:
     
    Add a Cross Browser Modal Dialog Box to Cute Editor

    How to create a custom button(client side) which displays a dialog?( C# | VB )

    This example demonstrates how easy it can be to add your own client side buttons to the CuteEditor by creating a Cross Browser Modal Dialog Box.

     
    Source (you can find the source code in the download example too )
     
    Example download:
     
     
    Location CuteEditor_for_NET6.zip\Framework 2.0\HowTo\AddDialogs\cs
     
    aspx page
     
    1. <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>   
    2. <%@ Page language="c#"%>   
    3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >    
    4.         <script language="JavaScript" type="text/javascript" >   
    5.             function ShowMyDialog(button)   
    6.             {   
    7.                 //use CuteEditor_GetEditor(elementinsidetheEditor) to get the cute editor instance   
    8.                 var editor=CuteEditor_GetEditor(button);   
    9.                 //show the dialog page , and pass the editor as newwin.dialogArguments   
    10.                 //(handler,url,args,feature)   
    11.                 var newwin=editor.ShowDialog(null,"My_Custom_Text.html?_rand="+new Date().getTime()   
    12.                     ,editor,"dialogWidth:400px;dialogHeight:240px");   
    13.             }   
    14.         </script>   
    15.   
    16. <html>   
    17.     <head>   
    18.         <title>ASP and ASP.NET WYSIWYG Editor - How to create a custom button which displays a dialog?</title>   
    19.         <link rel="stylesheet" href="../../example.css" type="text/css" />   
    20.     </head>   
    21.     <body >   
    22.         <form runat="server" ID="Form1">     
    23.             <h2>How to create a custom button which displays a dialog?</h2> <hr>   
    24.             <br>   
    25.             In this example, first we get the location of Italic button. Then we add a custom dialog after it.   
    26.             <br><br>   
    27.             <CE:Editor id="Editor1" ThemeType="OfficeXP" AutoConfigure="Minimal" EditorWysiwygModeCss="example.css" runat="server" ></CE:Editor><br />   
    28.                        
    29.            
    30.         </form>   
    31.     </body>   
    32. </html>   
    33. <script runat="server">   
    34.     private void Page_Load(object sender, System.EventArgs e)   
    35.     {   
    36.         //about Italic, see Full.config   
    37.         //<item type="image" name="Italic" imagename="Italic" />   
    38.         //get the pos after the Italic   
    39.         int pos=Editor1.ToolControls.IndexOf("Italic")+1;   
    40.   
    41.         //Themes/%ThemeName%/Images/text.gif   
    42.         WebControl ctrl=Editor1.CreateCommandButton("MyButton","text.gif","Insert My Custom Text");   
    43.   
    44.         ctrl.Attributes["onclick"]="ShowMyDialog(this)";   
    45.        
    46.         //add this custom button into the editor   
    47.         Editor1.InsertToolControl(pos,"MyButton",ctrl);   
    48.     }   
    49. </script>  
    Dialog page
     
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    2. <html>  
    3.     <head>  
    4.         <title>Insert Text</title>  
    5.     </head>  
    6.     <body bgcolor="#d4d0c8">  
    7.         <div align="center" style="padding:8px">  
    8.             <textarea rows="6" cols="40" id="ta" NAME="ta">Type content here</textarea>  
    9.             <br>  
    10.             <button onclick="button_click()" ID="Button1">Insert It</button>  
    11.             <button onclick="window.top.close();" ID="Button2">Close</button>  
    12.         </div>  
    13.     </body>  
    14.     <script>  
    15.     function button_click()   
    16.     {   
    17.         var editor=Window_GetDialogArguments(window);   
    18.         var ta=document.getElementById("ta");   
    19.         editor.PasteHTML(ta.value);   
    20.     }   
    21.     function Window_GetDialogArguments(win)   
    22.     {   
    23.         var top=win.top;   
    24.         if(top.dialogArguments)   
    25.             return top.dialogArguments;   
    26.         var opener=top.opener;   
    27.         if(opener==null)   
    28.             return top.document._dialog_arguments;   
    29.         return opener.document._dialog_arguments;   
    30.     }   
    31.     </script>  
    32. </html>  
     
    Regards,
     
    Ken
View Complete Thread