CuteEditor In a Child Window

Last post 02-24-2004, 8:28 AM by mgjunk. 3 replies.
Sort Posts: Previous Next
  •  02-22-2004, 5:13 PM 428

    CuteEditor In a Child Window

    Hello all.  First, kudos on a nice little piece of software. 

     

    I am having an issue that I though maybe somebody had already solved.  I am trying to make a very generic CuteEdtior page that I can access from pretty much anywhere in my site.  Here is what I'm trying to accomplish:

     

    I have an ASP page ("parent.asp") that has about 6 text areas (textarea1, textarea2, ....) where I need HTML editing.  Rather than put multiple CuteEditors on the page , I would like to open a child window ("child.asp") that contains the CuteEditor for ASP functionality.  I would also pass a few variables from the parent.asp window like the form name ("v_formname") and field name ("v_fieldname") in the opened page querystring.

     

    Once the user has edited the text in the child window, I would like for them to press an "Update Parent" button to close the window and pass the data from the CuteEditor child page back to the appropriate form text area field (as defined by the variables I passed earlier). 

     

    I don't want to write to the database first (because I have multiple tables and databases that I'd rather not code) and I don't want to refresh the parent.asp window because that will lose data that will be entered in other places first.  Any help would be appreciated!!! (especially the actual code since I'm sort of a beginner if you haven't already guessed)

  •  02-22-2004, 6:25 PM 429 in reply to 428

    Re: CuteEditor In a Child Window

    I figured I'd also post what I have working and maybe you can help me get to the finishline.  Basically, instead of the TextArea on the 2nd page, I want to have it be the Cute Editor.  Thanks a million in advance.

     

    2 ASP pages:  dad.asp and kid.asp

     

    Dad.asp


    <HTML>
    <HEAD>
    <SCRIPT>
    function popupCuteEditor(v_form, v_field)
    {
    var newWin, v_pagestring;
     v_pagestring = "kid.asp?form=" + v_form + "&field=" + v_field;
     newWin =window.open(v_pagestring,"HTMLEdit",'resizable=yes,scrollbars=yes,width=700,height=500,toolbar=yes')
    }
    </SCRIPT>

    <TITLE>Parent Page</TITLE>

    </HEAD>

    <BODY>
    <FORM name="f1" action="kid.asp" method=POST target='kid' onSubmit="updateitems.asp">
    <textarea name="t1" cols="42" rows="5">Text Area 1 Text</textarea><br>
    <input type="button" value="Edit In CuteEditor" name="B1"  onclick="popupCuteEditor('f1','t1')">
    <p></p>


    <textarea rows="5" name="t2" cols="42">Text Area 2 Text</textarea><br>
    <input type="button" value="Edit In CuteEditor" name="B2"  onclick="popupCuteEditor('f1','t2')">

    <p>
    <INPUT type="submit" value=Submit>
    </p>
    </FORM>

    </BODY>
    </HTML>

     

    kid.asp


    <HTML>
    <HEAD>
    <script>

    // querystring
    // Call function by x = querystring("variable") returns variable=x
    function querystring(key)
    {

    var value = null;
    for (var i=0;i<querystring.keys.length;i++)
    {
    if (querystring.keys[i]==key)
    {
    value = querystring.values[i];
    break;
    }
    }
    return value;
    }


    querystring.keys = new Array();
    querystring.values = new Array();

    function querystring_parse()
    {
    var query = window.location.search.substring(1);
    var pairs = query.split("&");

    for (var i=0;i<pairs.length;i++)
    {
    var pos = pairs[i].indexOf('=');
    if (pos >= 0)
    {
    var argname = pairs[i].substring(0,pos);
    var value = pairs[i].substring(pos+1);
    querystring.keys[querystring.keys.length] = argname;
    querystring.values[querystring.values.length] = value;
    }
    }
    }
    querystring_parse();

    // Set the parent windows form and field to a variable

    var v_parentform, v_field, v_form;
    v_field = querystring("field");
    v_form = querystring("form");

    var v_parent = "window.opener.";
    v_parentform = eval(v_parent + v_form);


    function tellDad()
    {
    v_parentform.elements[v_field].value=document.f2.t3.value;
    }


    function getparentdata()
    {
    document.f2.t3.value = v_parentform.elements[v_field].value;
    }

    </SCRIPT>

    <TITLE>Kid Child Window</TITLE>

    </HEAD>

    <BODY onload="getparentdata()">

    <FORM name="f2"  method=POST >
    The area below I would like to be the Cute Editor instead of a Textarea<br>
    <textarea rows="4" name="t3" cols="34"></textarea><br>

    <INPUT type="button" value='Change Parent value' onClick="tellDad(); window.close();" >


    </FORM>
    </BODY>
    </HTML>

     

  •  02-23-2004, 6:56 PM 436 in reply to 429

    Re: CuteEditor In a Child Window

    mgjunk,

     

    I just wrote a fix for this. It works. You can test it in our online demo.

     

    Please check it out.

     

    Dad.asp


    <HTML>

    <HEAD>

    <SCRIPT>

    function popupCuteEditor(v_form, v_field)

    {

         var newWin, v_pagestring;

         w = 740;

         h = 300;

         LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;

         TopPosition = (screen.height) ? (screen.height-h)/2 : 0;

         settings = 'height='+h+',width='+w+',top='+TopPosition+',left=';

         v_pagestring = "kid.asp?form=" + v_form + "&field=" + v_field;

         newWin =window.open(v_pagestring,"HTMLEdit",settings + LeftPosition+'resizable=yes')

    }

    </SCRIPT>

    <TITLE>Parent Page</TITLE>

    </HEAD>

    <BODY>

          <FORM name="f1" action="kid.asp" method=POST target='kid' onSubmit="updateitems.asp">

                 <textarea name="t1" cols="42" rows="5">Text Area 1 Text</textarea><br>

                 <input type="button" value="Edit In CuteEditor" name="B1" onclick="popupCuteEditor('f1','t1')">

                 <p></p>

     

                <textarea rows="5" name="t2" cols="42">Text Area 2 Text</textarea><br>

                <input type="button" value="Edit In CuteEditor" name="B2" onclick="popupCuteEditor('f1','t2')">

                <p>

                    <INPUT type="submit" value=Submit>

               </p>

         </FORM>

    </BODY>

    </HTML>

     

    kid.asp


    <!-- #include file = "include_CuteEditor.asp" -->

    <HTML>

    <HEAD>

    <script>

          // querystring

         // Call function by x = querystring("variable") returns variable=x

         function querystring(key)

         {

             var value = null;

             for (var i=0;i<querystring.keys.length;i++)

             {

                 if (querystring.keys[i]==key)

                 {

                      value = querystring.values[i];

                      break;

                 }

             }

            return value;

         }

         querystring.keys = new Array();

         querystring.values = new Array();

         function querystring_parse()

         {

              var query = window.location.search.substring(1);

              var pairs = query.split("&");

              for (var i=0;i<pairs.length;i++)

              {

                  var pos = pairs[i].indexOf('=');

                  if (pos >= 0)

                  {

                      var argname = pairs[i].substring(0,pos);

                      var value = pairs[i].substring(pos+1);

                      querystring.keys[querystring.keys.length] = argname;

                      querystring.values[querystring.values.length] = value;

                  }

              }

         }

         querystring_parse();

        

          // Set the parent windows form and field to a variable

          var v_parentform, v_field, v_form;

          v_field = querystring("field");

          v_form = querystring("form");

          var v_parent = "window.opener.";

          v_parentform = eval(v_parent + v_form);

     

          function tellDad()

          {

               //Editor1 is the ID of the Editor

               var editor = document.getElementById("Editor1_editBox");

               v_parentform.elements[v_field].value=editor.innerHTML;

          }

          

          function Onload()

          {

              getparentdata();

               resizeWindow();

          }

         

          function getparentdata()

          {

              //Editor1 is the ID of the Editor

              var editor = document.getElementById("Editor1_editBox");

              editor.innerHTML = v_parentform.elements[v_field].value;

           }

          

           function resizeWindow() {

                var iWidth = 720 + 18;

                var iHeight = 350 + 44;

                window.resizeTo(iWidth,iHeight)

          }

    </SCRIPT>

    <TITLE>Kid Child Window</TITLE>

    </HEAD>

    <BODY onload="Onload()" bgcolor="#EAF6ED">

    <FORM name="f2" method=POST >

        <%

             dim content

             Dim editor

             Set editor = New CuteEditor

             editor.ID = "Editor1"

             editor.Text = content

             editor.FilesPath = "/ASP/CuteEditor_Files"

             editor.ImageGalleryPath = "/Uploads"

             editor.MaxImageSize = 50

             editor.DisableItemList = "Save"

             'editor.AutoConfigure = "EnableAll"

             'editor.Template= "Bold,Italic,Underline"

             'editor.StyleSheetPath = "/grey2.css"

             'editor.Width = 740

             editor.Height = 240

             editor.Draw()

             ' Request.Form(ID) access from other page

      %>

    <br>

    <INPUT type="button" value='Change Parent value' onClick="tellDad(); window.close();" >

     

    </FORM>

    </BODY>

    </HTML>


    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

  •  02-24-2004, 8:28 AM 444 in reply to 436

    Re: CuteEditor In a Child Window

    Wow, the Demo works GREAT!  Exactly what I was looking for.  However, when I tried to paste the code into my pages, I got an Error:

     

    Microsoft VBScript runtime error '800a01b6'
    Object doesn't support this property or method: 'DisableItemList'
    ?, line 0

     

    I assume this is because I need to update my CuteEditor source files which I will do and test this evening.

     

    Thank you very much for the insight and quick turnaround!

View as RSS news feed in XML