WYMeditor forum

WYMeditor is a web-based WYSIWYM XHTML editor

Skip to content

Forum closed. New forum available at http://community.wymeditor.org/

Editing Dialog Boxes

Support forum for WYMeditor.
Post a reply

Editing Dialog Boxes

Postby matthoughton on Wed Mar 04, 2009 10:39 pm

Hello again,

I'm wondering how I can modify the dialog box which pops up for "insert image". I'd like to add code into this dialog box to allow the user to select an image from a list. I've found the code within the wymeditor.js which seems to generate the HTML but it just won't change.
I'm assuming that because the HTML code is embedded into the Javascript, I'm going to struggle to insert PHP queries into it. I was going to settle (begrudgingly) with a link which opens a new window.
Code: Select all
    dialogImageHtml:  "<body class='wym_dialog wym_dialog_image'"
               + " onload='WYMeditor.INIT_DIALOG(" + WYMeditor.INDEX + ")'"
               + ">"
               + "<form>"
               + "<fieldset>"
               + "<input type='hidden' class='wym_dialog_type' value='"
               + WYMeditor.DIALOG_IMAGE
               + "' />"
               + "<legend>{Image}</legend>"
               + "<div class='row'>"
               + "<label>{URL}</label>"
               + "<input type='text' class='wym_src' value='' size='40' />"
               + "</div>"
               + "<div class='row'>"
               + "<label>{Alternative_Text}</label>"
               + "<input type='text' class='wym_alt' value='' size='40' />"
               + "</div>"
               + "<div class='row'>"
               + "<label>{Title}</label>"
               + "<input type='text' class='wym_title' value='' size='40' />"
               + "</div>"
               + "<div class='row row-indent'>"
               + "<input class='wym_submit' type='button'"
               + " value='{Submit}' />"
               + "<input class='wym_cancel' type='button'"
               + "value='{Cancel}' />"
               + "<input class='wym_submit' type='button' value='click for images'>"
               + "</div>"
               + "<div><p onClick='window.open('insert_image.php','mywindow','width=300,height=300,right=0,top=100,screenX=200,screenY=20')'>Click Here to View Images</p></div>"
               + "</fieldset>"
               + "</form>"
               + "</body>",


Aside from the likelihood that the js I've inserted will cause an error, it's not even loading when you try to insert an image. It just seems to ignore that line altogether (I've tried a generic text change too and that didn't work).

Can anyone please help?

Thanks!!
matthoughton
 
Posts: 24
Joined: Thu Feb 12, 2009 10:28 pm
Top

Re: Editing Dialog Boxes

Postby flipflops on Thu Mar 05, 2009 1:39 pm

Hi Matt

Check out this http://www.djangosnippets.org/snippets/1201/

I went from this to putting an iframe in a resized dialog window and my file browser in the iframe.

I'm not getting rid of the wym dialog box, but making it look like something else, then from within the iframe you can populate the #filebrowser field in the dialog and insert from here into the actual editor window.

Code: Select all
wymeditor_filebrowser = function(wym, wdw) {
  // the URL to the filebrowser, depends on your URLconf
   var browser_url = '/admin/uploads/image_browser';
 
     var dlg = jQuery(wdw.document.body);
     if (dlg.hasClass('wym_dialog_image')) {
       // this is an image dialog
       dlg.find('.wym_src').attr('id', 'filebrowser')
         .after('<iframe src="' + browser_url + '" width="1000px" height="620px" scrolling="yes" frameborder="0" name="browser-frame-1" id="browser-frame-1"></iframe>')
         .after('<input type="submit" id="change-click" value="clickme" class="wym_submit_me" />');
      
     }
 
 
                dlg.find('#change-click')
                .click(function() {

                    var tag   = dlg.find('#filebrowser').val();
                   
            

                    wym.insert(tag);
                    wdw.close();

                });
               
               
                  
 
}


Sorry if this is a bit vague but it should give you an idea of how to proceed - I'm going to try and write up an article explaining how I got this to work, but I am a bit swamped right now.

Anyway I've just uploaded a archive http://www.flipflops.org/local.wtest.com.rar, it contains some really rough and ready examples of how i got it to work starting from the django example and working through step by step until i could update from the iframe. If you look at the code then you should be able to figure out how you can get it all to work.

You need to start at index4.html and try out 5,6 and 7 - click on the image icon to launch the dialog.

Hope this helps.

Cheers

John
flipflops
 
Posts: 4
Joined: Wed Feb 04, 2009 4:22 pm
Top

Re: Editing Dialog Boxes

Postby matthoughton on Thu Mar 05, 2009 8:40 pm

Thanks John!

Seems like a bit of a job to do that! I'll probably revisit this once the rest of the CMS is complete. I don't know why that code is present in the JS if it's not used though!

I'm not great at JS so it'll have to wait for now.

Thanks for your help.
matthoughton
 
Posts: 24
Joined: Thu Feb 12, 2009 10:28 pm
Top

Re: Editing Dialog Boxes

Postby flipflops on Fri Mar 06, 2009 8:18 am

Hi Matt

The code you've got below with your insert_image.php link it should work I think, as I've modified the dialog HTML myself. I would imagine that you just aren't over-writing the original dialogue template with your new code - as js often gets cached in the browser pretty aggressively - especially if it is in external .js files.

For things like links where I don't need anything complex as an image browser I've just append a click icon to the end of the link url field and then when you click on this it just loads up a select menu with all the links for my site via AJAX.

You are right that it seems like a lot of work to get a browser working, but once the dev code i archived is cleared up its really not that bad !

Cheers.
flipflops
 
Posts: 4
Joined: Wed Feb 04, 2009 4:22 pm
Top

Re: Editing Dialog Boxes

Postby roundash on Fri Mar 06, 2009 9:21 am

Hi Matt

The way I do this is to use jQuery to load the php file in the INIT_DIALOG function.

So I would proceed as follows:

1/ Change the HTML you have for the dilaog so that the line that currently contains your link to view the files is simply an empty div with an id (say 'images') eg:

Code: Select all
<div id="images"></div>


2/ Locate the INIT_DIALOG function and add the following line to the code for the WYMeditor.DIALOG_IMAGE:

Code: Select all
jQuery("#images").load("'insert_image.php");


Obviously you need to ensure that insert_image.php returns the html that displays the images.

I hope this helps.
roundash
 
Posts: 24
Joined: Wed May 30, 2007 4:13 pm
Location: Devon, UK
Top

Re: Editing Dialog Boxes

Postby matthoughton on Tue Mar 31, 2009 5:19 pm

thanks, I've tried your suggestion but for some reason nothing makes a blind bit of difference.

I am editing the file: jquery.wymeditor.js but my changes appear to just be ignored. I've yet to see any change whatsoever.

Any ideas?

Thanks!
matthoughton
 
Posts: 24
Joined: Thu Feb 12, 2009 10:28 pm
Top

Re: Editing Dialog Boxes

Postby eadevel on Thu Apr 02, 2009 6:17 pm

You might be using the packed version of wymeditor.
Check in your html page if you're using "jquery.wymeditor.pack.js" or "jquery.wymeditor.js". You should be using the unpacked one to test the changes you make.
eadevel
 
Posts: 22
Joined: Thu Sep 27, 2007 12:00 pm
Top

Re: Editing Dialog Boxes

Postby matthoughton on Sun Apr 26, 2009 3:51 pm

Thanks, it turns out that I was using the packed version. that makes a helluva difference!!

I can't work out where to put the code: jQuery("#images").load("'insert_image.php");

Can you be a bit more specific, my Init_dialog function looks like:
Code: Select all
WYMeditor.INIT_DIALOG = function(index) {
   
  var wym = window.opener.WYMeditor.INSTANCES[index];
  var doc = window.document;
  var selected = wym.selected();
  var dialogType = jQuery(wym._options.dialogTypeSelector).val();
  var sStamp = wym.uniqueStamp();

  switch(dialogType) {

  case WYMeditor.DIALOG_LINK:
    //ensure that we select the link to populate the fields
    if(selected && selected.tagName && selected.tagName.toLowerCase != WYMeditor.A)
      selected = jQuery(selected).parentsOrSelf(WYMeditor.A);

    //fix MSIE selection if link image has been clicked
    if(!selected && wym._selected_image)
      selected = jQuery(wym._selected_image).parentsOrSelf(WYMeditor.A);
  break;


  }

  //pre-init functions
  if(jQuery.isFunction(wym._options.preInitDialog))
    wym._options.preInitDialog(wym,window);

  //add css rules from options
  var styles = doc.styleSheets[0];
  var aCss = eval(wym._options.dialogStyles);

  wym.addCssRules(doc, aCss);

  //auto populate fields if selected container (e.g. A)
  if(selected) {
    jQuery(wym._options.hrefSelector).val(jQuery(selected).attr(WYMeditor.HREF));
    jQuery(wym._options.srcSelector).val(jQuery(selected).attr(WYMeditor.SRC));
    jQuery(wym._options.titleSelector).val(jQuery(selected).attr(WYMeditor.TITLE));
    jQuery(wym._options.altSelector).val(jQuery(selected).attr(WYMeditor.ALT));
  }

  //auto populate image fields if selected image
  if(wym._selected_image) {
    jQuery(wym._options.dialogImageSelector + " " + wym._options.srcSelector)
      .val(jQuery(wym._selected_image).attr(WYMeditor.SRC));
    jQuery(wym._options.dialogImageSelector + " " + wym._options.titleSelector)
      .val(jQuery(wym._selected_image).attr(WYMeditor.TITLE));
    jQuery(wym._options.dialogImageSelector + " " + wym._options.altSelector)
      .val(jQuery(wym._selected_image).attr(WYMeditor.ALT));
  }

  jQuery(wym._options.dialogLinkSelector + " "
    + wym._options.submitSelector).click(function() {

      var sUrl = jQuery(wym._options.hrefSelector).val();
      if(sUrl.length > 0) {

        wym._exec(WYMeditor.CREATE_LINK, sStamp);

        jQuery("a[@href=" + sStamp + "]", wym._doc.body)
            .attr(WYMeditor.HREF, sUrl)
            .attr(WYMeditor.TITLE, jQuery(wym._options.titleSelector).val());

      }
      window.close();
  });

  jQuery(wym._options.dialogImageSelector + " "
    + wym._options.submitSelector).click(function() {

      var sUrl = jQuery(wym._options.srcSelector).val();
      if(sUrl.length > 0) {

        wym._exec(WYMeditor.INSERT_IMAGE, sStamp);

        jQuery("img[@src=" + sStamp + "]", wym._doc.body)
            .attr(WYMeditor.SRC, sUrl)
            .attr(WYMeditor.TITLE, jQuery(wym._options.titleSelector).val())
            .attr(WYMeditor.ALT, jQuery(wym._options.altSelector).val());
      }
      window.close();
  });

  jQuery(wym._options.dialogTableSelector + " "
    + wym._options.submitSelector).click(function() {

      var iRows = jQuery(wym._options.rowsSelector).val();
      var iCols = jQuery(wym._options.colsSelector).val();

      if(iRows > 0 && iCols > 0) {

        var table = wym._doc.createElement(WYMeditor.TABLE);
        var newRow = null;
      var newCol = null;

      var sCaption = jQuery(wym._options.captionSelector).val();

      //we create the caption
      var newCaption = table.createCaption();
      newCaption.innerHTML = sCaption;

      //we create the rows and cells
      for(x=0; x<iRows; x++) {
         newRow = table.insertRow(x);
         for(y=0; y<iCols; y++) {newRow.insertCell(y);}
      }

        //set the summary attr
        jQuery(table).attr('summary',
            jQuery(wym._options.summarySelector).val());

        //append the table after the selected container
        var node = jQuery(wym.findUp(wym.container(),
          WYMeditor.MAIN_CONTAINERS)).get(0);
        if(!node || !node.parentNode) jQuery(wym._doc.body).append(table);
        else jQuery(node).after(table);
      }
      window.close();
  });

  jQuery(wym._options.dialogPasteSelector + " "
    + wym._options.submitSelector).click(function() {

      var sText = jQuery(wym._options.textSelector).val();
      wym.paste(sText);
      window.close();
  });

  jQuery(wym._options.dialogPreviewSelector + " "
    + wym._options.previewSelector)
    .html(wym.xhtml());

  //cancel button
  jQuery(wym._options.cancelSelector).mousedown(function() {
    window.close();
  });

  //pre-init functions
  if(jQuery.isFunction(wym._options.postInitDialog))
    wym._options.postInitDialog(wym,window);
};
matthoughton
 
Posts: 24
Joined: Thu Feb 12, 2009 10:28 pm
Top

Re: Editing Dialog Boxes

Postby roundash on Fri May 22, 2009 7:42 am

Sorry, have been very busy lately and you've probably figured this already.

Immediately after the 'break' statement, add another 'case' statement for WYMeditor.DIALOG_IMAGE so that your case statement code would now look like:

Code: Select all
case WYMeditor.DIALOG_LINK:
  //ensure that we select the link to populate the fields
    if(selected && selected.tagName && selected.tagName.toLowerCase != WYMeditor.A)
      selected = jQuery(selected).parentsOrSelf(WYMeditor.A);

    //fix MSIE selection if link image has been clicked
    if(!selected && wym._selected_image)
      selected = jQuery(wym._selected_image).parentsOrSelf(WYMeditor.A);
  break;
case WYMeditor.DIALOG_IMAGE:
  jQuery("#images").load("'insert_image.php");
  break;
}
roundash
 
Posts: 24
Joined: Wed May 30, 2007 4:13 pm
Location: Devon, UK
Top

Re: Editing Dialog Boxes

Postby matthoughton on Mon Jun 15, 2009 12:18 pm

Thanks, I did manage to get that bit in the end. I thought I'd managed to totally sort it but one ridiculous problem after another!

Just for testing, I had the PHP write the following text,

Code: Select all
<input type='text' name='tx'/>


Now the window looks perfect but it doesn't work. I think I've established why but I still can't fix it.

Here's the code from the window (shown using View Source)
Code: Select all
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html dir='ltr'><head><link rel='stylesheet' type='text/css' media='screen' href='wymeditor/skins/twopanels/skin.css' />
<title>Image</title><script type='text/javascript' src='jquery/jquery.js'></script><script type='text/javascript' src='wymeditor/jquery.wymeditor.js'></script></head><body class='wym_dialog wym_dialog_image' onload='WYMeditor.INIT_DIALOG(0)'><form><fieldset><input type='hidden' class='wym_dialog_type' value='Image' /><legend>Image</legend><div id='images'></div><div class='row row-indent'><input class='wym_submit' type='button' value='Submit' /><input class='wym_cancel' type='button'value='Cancel' /></div></fieldset></form></body></html>


The code I added <div id='images'></div> is present but the input isn't!! It's clearly in the window but doesn't show up in the source. As a result, nothing gets parsed from the form.

Are you able to help with this new issue?! Thank you so much for all of your input
matthoughton
 
Posts: 24
Joined: Thu Feb 12, 2009 10:28 pm
Top

Re: Editing Dialog Boxes

Postby roundash on Wed Jun 17, 2009 7:31 pm

I notice that in my code sample I posted last time there was an extra apostrophe that shouldn't have been there.

Code: Select all
jQuery("#images").load("'insert_image.php");


should have been:
Code: Select all
jQuery("#images").load("insert_image.php");


ie no apostrophe after load("

If you had already spotted this and that is not the problem, then does the insert_image.php file (or whatever you've called) it load on its own - in other words if you view the file in a browser do you see the text box that you mention should be there?

If you are still having problems, post your code and I will take a look.
roundash
 
Posts: 24
Joined: Wed May 30, 2007 4:13 pm
Location: Devon, UK
Top

Re: Editing Dialog Boxes

Postby matthoughton on Thu Jun 18, 2009 9:39 pm

Thanks for your help, I'll work through it sequentially and show you how it's working.

Here's the code now inside the jquery.wymeditor.js
Switch Statement:
Code: Select all
case WYMeditor.DIALOG_IMAGE:
     jQuery("#images").load("mgr/functions/wym_insertimage.php");
     break;


Dialog:
Code: Select all
dialogImageHtml:  "<body class='wym_dialog wym_dialog_image'"
                   + " onload='WYMeditor.INIT_DIALOG(" + WYMeditor.INDEX + ")'"
                   + ">"
                   + "<form><fieldset>"
                   + "<input type='hidden' class='wym_dialog_type' value='"
                   + WYMeditor.DIALOG_IMAGE
                   + "' />"
                   + "<legend>{Image}</legend>"
                   + "<div id='images'> </div>"
                   + "<div class='row row-indent'>"
                   + "<input class='wym_submit' type='button'"
                   + " value='{Submit}' />"
                   + "<input class='wym_cancel' type='button'"
                   + "value='{Cancel}' />"
                   + "</div>"
                   + "</fieldset>"
                   + "</form>"
                   + "</body>",


Next up is the contents of my wym_insert_image.php
Code: Select all
<?php
   /*
    * Insert Image Script for WYMEditor
    */

   require_once('../../inc/mgr_settings.php');
   require_once('../../inc/inc_db.php');
   // Initialise Database
   $connect = dbconnect();
   
   $sql = "SELECT * FROM images";
   $result = mysql_query($sql,$connect);
   dbclose($connect);
   
   if (mysql_num_rows($result)<1) {
      ?>
        <div class='row'>
                                       <label>URL</label>
                                       <input type='text' class='wym_src' value='' size='40' />
                                  </div>
                                 <div class='row'>
                                      <label>Alternative_Text</label>
                                      <input type='text' class='wym_alt' value='' size='40' />
                                 </div>
                                 <div class='row'>
                                      <label>Title</label>
                                      <input type='text' class='wym_title' value='' size='40' />
                                  </div>
      <?php
      exit;
   }
   ?>
   <p>Please choose from the list below</p>
   <select name="wym_src">
   <?php
   while($row = mysql_fetch_object($result)) {
      ?><option value="<?php echo $row->image_filename; ?>"><?php echo $row->image_name."( ".$row->image_alt." )"?></option>
      <?php   
   }
   ?>
   </select>

As you will see, it checks my db, if there are images it gives a dropdown list of them, else it gives the default options.

So the resulting screen looks like:


Image

So it works.... but here's the source code:

Code: Select all
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'><html dir='ltr'><head><link rel='stylesheet' type='text/css' media='screen' href='wymeditor/skins/twopanels/skin.css' /><title>Image</title><script type='text/javascript' src='jquery/jquery.js'></script><script type='text/javascript' src='wymeditor/jquery.wymeditor.js'></script></head><body class='wym_dialog wym_dialog_image' onload='WYMeditor.INIT_DIALOG(0)'><form><fieldset><input type='hidden' class='wym_dialog_type' value='Image' /><legend>Image</legend><div id='images'> </div><div class='row row-indent'><input class='wym_submit' type='button' value='Submit' /><input class='wym_cancel' type='button'value='Cancel' /></div></fieldset></form></body></html>


Nothing ever gets parsed to the form and I get this error message in Javascript

Code: Select all
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30618; OfficeLiveConnector.1.3; OfficeLivePatch.0.0)
Timestamp: Thu, 18 Jun 2009 21:44:48 UTC


Message: 'length' is null or not an object
Line: 1472
Char: 7
Code: 0
URI: http://localhost/manager/wymeditor/jquery.wymeditor.js



Basically I've established that this line relates to the length of the URL string from the parsed form. There's no string so there's no length!





Thanks for your help!
matthoughton
 
Posts: 24
Joined: Thu Feb 12, 2009 10:28 pm
Top

Re: Editing Dialog Boxes

Postby roundash on Thu Jun 25, 2009 1:28 pm

I will take a closer look at this later but before I do I notice that the javascript calls a page named wym_insertimage.php but later in your code you refer to the contents of 'wym_insert_image.php'.

Is this a typo?
roundash
 
Posts: 24
Joined: Wed May 30, 2007 4:13 pm
Location: Devon, UK
Top

Re: Editing Dialog Boxes

Postby matthoughton on Sat Jun 27, 2009 6:25 am

yes that is a typo. It is the contents of mgr/functions/wym_insertimage.php

Cheers
matthoughton
 
Posts: 24
Joined: Thu Feb 12, 2009 10:28 pm
Top

Re: Editing Dialog Boxes

Postby roundash on Mon Jul 06, 2009 7:10 pm

Everything in the code snippets you posted looks OK to me.

Have you got a test page I can look at?
roundash
 
Posts: 24
Joined: Wed May 30, 2007 4:13 pm
Location: Devon, UK
Top
Next
Post a reply

Return to Support

Who is online

Users browsing this forum: No registered users and 2 guests

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group