Support forums » Products » Cute Editor for ASP » Re: Custom Dialog Box

Custom Dialog Box

Last post 10-22-2007, 1:01 PM by Bill Rishsew. 3 replies.
Sort Posts: Previous Next

  •  10-19-2007, 4:01 PM 34449

    Custom Dialog Box

    Reply Quote
    Using: CuteEditor for ASP 6
     
    Goal:
    1. Create a Custom Button on the Toolbar,
    2. Custom Button will open a Custom Dialog Box,
    3. Custom Dialog Box will list all pre-built webpages for linking,
    4. Selected link will be returned to the calling editor formatted as a <a href=...,
    5. If text was selected in the calling editor prior to pressing the Custom Button, it will remain as the text between the <a> and the </a>,
    6. If an image was selected in the calling editor prior to pressing the Custom Button, it will remain as the image between the <a> and the </a>,
    7. If nothing was selected in the calling editor prior to pressing the Custom Button, the selected webpage link's name (supplied via a db qry) will be returned between the <a> and the </a>.
    So far I have created the
     
      Custom Button: editor.CustomAddons = "<img title=""Add a Standalone Page Link"" style=""margin-left: 10px; class=""CuteEditorButton"" onmouseover=""CuteEditor_ButtonCommandOver(this)"" onmouseout=""CuteEditor_ButtonCommandOut(this)"" onmousedown=""CuteEditor_ButtonCommandDown(this)"" onmouseup=""CuteEditor_ButtonCommandUp(this)"" ondragstart=""CuteEditor_CancelEvent()"" onclick=""ShowMyDialog(this)"" src=""/modules/images/standalone_page_link.gif"" />"
     
       Code for opening the Custom Dialog Box:
    <script type="text/javascript">  
         function ShowMyDialog(button) {
          var editor = CuteEditor_GetEditor(button);
          var newwin=editor.ShowDialog(null,"/modules/manage/addStandalonePageLink.asp?dpt=<%=Request.QueryString("dpt")%>&_rand="+new Date().getTime(),editor,"dialogWidth:292px;dialogHeight:140px");
         }
        </script>
     
       Custom Dialog Box:
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>Standalone Pages</title>
      <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)" />
      <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.1)" />
      <link href="http://cutesoft.net/modules/CuteEditor_files/style/dialog.css" type="text/css" rel="stylesheet" />
      <!--[if IE]>
       <link href="http://cutesoft.net/modules/CuteEditor_Files/style/IE.css" type="text/css" rel="stylesheet" />
      <![endif]-->
      <script type="text/javascript" src="http://cutesoft.net/modules/CuteEditor_Files/Scripts/Dialog/DialogHead.js"></script>
      <script language="javascript" type="text/javascript">
       function button_click() {
        var editor = Window_GetDialogArguments(window);
        var selectedPage = document.getElementById('allPages');
        var selectedText = editor.GetSelection().createRange();
        editor.PasteHTML('<a href="http://cutesoft.net/websites/index.asp?dpt=<%=Request.QueryString("dpt")%>&pageID='+selectedPage.options[selectedPage.selectedIndex].value+'">'+selectedText+'</a>'); //selectedPage.options[selectedPage.selectedIndex].text
        window.close();
       }
       
       function Window_GetDialogArguments(win) {
        var top = win.top;
        var opener = top.opener;
        
        if(top.dialogArguments) {
         return top.dialogArguments;
        }
        
        if(opener == null) {
         return top.document._dialog_arguments;
        }
        
        return opener.document._dialog_arguments;
       }
      </script>
      <style type="text/css">
       .btn {
        border: 1px solid buttonface;
        padding: 1px;
        cursor: default;
        width:14px;
        height: 12px;
        vertical-align: middle;
       }
       select,input,td {
        font-family: MS Sans Serif;
        font-size: 9pt;
        vertical-align: top;
        cursor: hand;
       }
      </style>
     </head>
     <body style="margin:0px;border-width:0px;padding:4px;">
      <form name="frmStandalonePageLinks" id="frmStandalonePageLinks" method="post" action="" onSubmit="">
       <div>
        <fieldset style="padding: 2px;">
         <legend>Insert Standalone Page Link</legend>
          <select size="3" name="allPages" id="allPages" style="width: 255; margin: 10px;">
           <%=strPageLinks%>
          </select>
        </fieldset>
       </div>
       <div style="margin: 10px 7px 0 0; width: 100%; text-align: right;">
        <input class="inputbuttoninsert" type="button" value=" Insert " style="width: 80px;" onClick="button_click();" />&nbsp;&nbsp;
        <input class="inputbuttoncancel" type="button" value=" Cancel " style="width: 80px;" onClick="window.close();" />
       </div>
      </form>
     </body>
     <script type="text/javascript" src="http://cutesoft.net/modules/CuteEditor_Files/Scripts/Dialog/DialogFoot.js"></script>
    </html>
     
       Returned Link: I have it to the point of returning the page link with the db qry name between the <a> and the </a>.
     
    My question then, is how do I grab the selected text from within the Custom Dialog Box?
    After reading several posts, I've tried:
       var selectedText = editor.GetSelection();
       and
       var selectedText = editor.GetSelection().createRange();
       The returned value is [object]
     
    Thoughts?
    Work Hard! Play Harder!!

  •  10-22-2007, 10:24 AM 34486 in reply to 34449

    Re: Custom Dialog Box

    Reply Quote
    http://cutesoft.net/forums/post/33789.aspx

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  10-22-2007, 11:04 AM 34490 in reply to 34486

    Re: Custom Dialog Box

    Reply Quote
    Adam,
       Thanks.
       I've modified my Dialog Box script.
       I'm not understanding why the var editor = Window_GetDialogArguments(window); portion of the script isn't recognized when I use rng = editor.selection.createRange();.
       The script generates a editor.selection is Null or not an object.
       I want to preserve the selected text if any has been selected, or use the .text property of the options collection for the selected option in a select.
       Here is the script:
     
      <script language="javascript" type="text/javascript">
       var editor = Window_GetDialogArguments(window);
       var selectedPage = document.getElementById('allPages');
       var selectedText = '';
       
       function button_click() {
        selectedText = getSelectedHTML();
        if(selectedText != '') {
         //do nothing
        }
        else {
         selectedText = selectedPage.options[selectedPage.selectedIndex].text;
        }
        editor.PasteHTML('<a href="http://cutesoft.net/websites/index.asp?dpt=<%=Request.QueryString("dpt")%>&pageID='+selectedPage.options[selectedPage.selectedIndex].value+'">'+selectedText+'</a>');
        window.close();
       }
       
       function Window_GetDialogArguments(win) {
        var top = win.top;
        var opener = top.opener;
        
        if(top.dialogArguments) {
         return top.dialogArguments;
        }
        
        if(opener == null) {
         return top.document._dialog_arguments;
        }
        
        return opener.document._dialog_arguments;
       }
       
       function getSelectedHTML() {
        var rng = null
        var html = '';
     
        if(document.selection && document.selection.createRange) {
         rng = editor.selection.createRange();
         html = rng.htmlText || "";
        }
        else if(window.getSelection) {
         rng = editor.getSelection();
     
         if(rng.rangeCount > 0 && window.XMLSerializer) {
          rng = rng.getRangeAt(0);
          html = new XMLSerializer().serializeToString(rng.cloneContents());
         }
        }
        
           return html;
         }
      </script>
    Work Hard! Play Harder!!

  •  10-22-2007, 1:01 PM 34496 in reply to 34490

    Re: Custom Dialog Box

    Reply Quote
    I guess I'm confused by the editor argument in the Custom Button code:
     
    var newwin=editor.ShowDialog(null,"/modules/manage/addStandalonePageLink.asp?dpt=<%=Request.QueryString("dpt")%>&_rand="+new Date().getTime(),editor,"dialogWidth:292px;dialogHeight:175px");
     
    What good does this do me in the dilog box?
    I thought it was a pointer -> to the editor object in the parent window????
    This is confusing me because I see (from the online example of a custom dialong box code) that a function scoped variable of the same name is declared:
     
    function button_click() {
        var editor = Window_GetDialogArguments(window);
        ....
     
    Can I make use of the editor argument in my custom dialog box?
     
     
    Work Hard! Play Harder!!
View as RSS news feed in XML