Support forums » Products » Cute Editor for .NET » Re: CuteEditor - IE 11 Problem: Cannot get passed information from editor content in custom dialog form with IE 11

Re: CuteEditor - IE 11 Problem: Cannot get passed information from editor content in custom dialog form with IE 11

  •  05-13-2014, 2:03 PM

    Re: CuteEditor - IE 11 Problem: Cannot get passed information from editor content in custom dialog form with IE 11

    Reply Quote

    Hi wzou,

     

    Please try the new example code below. I have correct it to match your requirement. it will work with IE11 too.

     

    1. create_a_custom_dialog.aspx  code

     

    1. <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>  
    2. <%@ Page language="c#"%>  
    3. <html>  
    4. <head>  
    5.     <title>ASP.NET WYSIWYG Editor - How to create a custom button which displays a dialog?</title>  
    6.   
    7.     <script language="JavaScript" type="text/javascript">  
    8.             function ShowMyDialog(button)  
    9.             {  
    10.                 //use CuteEditor_GetEditor(elementinsidetheEditor) to get the cute editor instance  
    11.                 var editor=CuteEditor_GetEditor(button);  
    12.                 //show the dialog page , and pass the editor as newwin.dialogArguments  
    13.                 //(handler,url,args,feature)  
    14.                 var newwin=editor.ShowDialog(null,"My_Custom_Text.html?_rand="+new Date().getTime()  
    15.                     ,editor,"dialogWidth:400px;dialogHeight:240px");  
    16.             }  
    17.     </script>  
    18.   
    19.     <style>  
    20.         body {   
    21.         text-align: center;   
    22.         margin-top:20px  
    23.         }  
    24.         .demo {   
    25.         text-align: left;   
    26.         width: 800px;  
    27.         padding: 30px 30px 50px 30px;   
    28.         font-family:Segoe UI, Arial,Verdana,Helvetica,sans-serif;  
    29.         font-size: 100%;  
    30.         margin: 0 auto;   
    31.         }   
    32.     </style>  
    33. </head>  
    34. <body>  
    35.     <form runat="server" id="Form1">  
    36.         <div class="demo">  
    37.             <h3>  
    38.                 How to create a custom button which displays a dialog?</h3>  
    39.             <p>  
    40.                 In this example, first we get the location of Italic button. Then we add a custom  
    41.                 dialog after it.</p>  
    42.             <CE:Editor id="Editor1" ThemeType="OfficeXP" AutoConfigure="Minimal" runat="server" />  
    43.         </div>  
    44.     </form>  
    45. </body>  
    46. </html>  
    47. <script runat="server">  
    48.     private void Page_Load(object sender, System.EventArgs e)  
    49.     {  
    50.         //about Italic, see Full.config  
    51.         //<item type="image" name="Italic" imagename="Italic" />  
    52.         //get the pos after the Italic  
    53.         int pos=Editor1.ToolControls.IndexOf("Italic")+1;  
    54.   
    55.         //Themes/%ThemeName%/Images/text.gif  
    56.         WebControl ctrl=Editor1.CreateCommandButton("MyButton","text.gif","Insert My Custom Text");  
    57.   
    58.         ctrl.Attributes["onclick"]="ShowMyDialog(this)";  
    59.       
    60.         //add this custom button into the editor  
    61.         Editor1.InsertToolControl(pos,"MyButton",ctrl);  
    62.     }  
    63. </script>  
     

    2. My_Custom_Text.html  code

     

    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.FocusDocument();   
    20.         editor.PasteHTML(ta.value);  
    21.     }  
    22.     //Window_GetDialogArguments.js  
    23.     function Window_GetDialogArguments(win)  
    24.     {  
    25.         var top=win.top;  
    26.         try  
    27.         {  
    28.             var opener=top.opener;  
    29.             if(opener&&opener.document._dialog_arguments)  
    30.                 return opener.document._dialog_arguments;  
    31.         }  
    32.         catch(x)  
    33.         {  
    34.         }  
    35.           
    36.         if(top.document._dialog_arguments)  
    37.             return top.document._dialog_arguments;  
    38.         if(top.dialogArguments)  
    39.             return top.dialogArguments;  
    40.         return top.document._dialog_arguments;  
    41.     }  
    42.     window.onload=function()  
    43.     {  
    44.         var editor=Window_GetDialogArguments(window);  
    45.         var ta=document.getElementById("ta");  
    46.         ta.value= getSelectedHTML(editor);  
    47.        
    48.     }  
    49.     function getSelectedHTML(editor)        
    50.         {           
    51.               var rng=null,html="";              
    52.                    
    53.               // get the active editor document     
    54.               var editdoc = editor.GetDocument();     
    55.             
    56.               // get the active editor window      
    57.               var editwin = editor.GetWindow();        
    58.               if (document.selection && document.selection.createRange)        
    59.               {          
    60.                     rng=editdoc.selection.createRange();        
    61.                    if( rng.htmlText )         
    62.                    {         
    63.                       html=rng.htmlText;         
    64.                    }         
    65.                    else if(rng.length >= 1)         
    66.                    {         
    67.                       html=rng.item(0).outerHTML;         
    68.                    }        
    69.               }        
    70.               else if (window.getSelection)        
    71.               {        
    72.                     rng=editwin.getSelection();        
    73.                     
    74.                     if (rng.rangeCount > 0 && window.XMLSerializer)        
    75.                     {        
    76.                           html=rng.getRangeAt(0);       
    77.                     }        
    78.               }        
    79.               return html;        
    80.         }     
    81.     </script>  
    82. </html>  
     

    Regards,

     

    Ken 
View Complete Thread