WYMeditor forum

by **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!!

by **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

by **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.

by **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.

by **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.

by **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!

by **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.

by **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); };

by **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; }

by **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

by **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.

by **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:

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!

by **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?

by **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

by **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?

WYMeditor forum

Editing Dialog Boxes

Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Re: Editing Dialog Boxes

Who is online