Example Image Upload with YUI Rich Text Editor 2.7.0
It's somewhat slow coming, but I've checked compatibility with the image uploader and YUI version 2.7.0. If you haven't read the original YUI Image Uploader page, start there. After that, you can use this page for an example getting the script to work with the latest YUI.
The 2.6 image uploader is compatible with Editor 2.7 as far as I can tell. All you need to do is update the included JavaScript files to point to the new 2.7 editor and you should be fine. For reference, here is the yui-image-uploader26.js file.
I've checked functionality on this page with Safari (4), Firefox (3), and Internet Explorer 7 (Actually, it worked on IE 6 too). If you're having a problem and it isn't working on this page, feel free to leave a comment with your error.
Here is the initialization JavaScript for the editor on this page. You can find information on Yahoo's Rich text editor here.
<!-- Skin CSS file --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css"> <!-- Utility Dependencies --> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> <!-- Needed for Menus, Buttons and Overlays used in the Toolbar --> <script src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script> <script src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script> <script src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script> <!-- Source file for Rich Text Editor--> <script src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script> <script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script> <script src="/wp-content/uploads/2007/10/yui-image-uploader26.js"></script> <script type="text/javascript"> var myEditor = new YAHOO.widget.Editor('example_editor', { height: '300px', width: '522px', dompath: true, animate: true }); yuiImgUploader(myEditor, 'example_editor', '/wp-content/uploads/2007/12/yui_img_uploader.php','image'); myEditor.render(); </script>
I left the server side image upload script the same as with previous versions of this script.
Feel free to leave a comment or contact me if you have questions or suggestions.
25 users commented in " Example Image Upload with YUI Rich Text Editor 2.7.0 "
Follow-up comment rss or Leave a TrackbackHey there I am just trying to get this image uploader working. And am having some troubles. When I alert the ee.message close to the end of the js file I get the error
Result of expression ‘Dom.getAncestorByTagName(img_elem, ‘form’)’ [null] is not an object.
I tried looking into it, but I don’t even know where to begin. Thanks!
I have been trying to use your script using YUI 2.7. But the upload label and the browse button did not show. I looked at the script, and I found that if you comment this line: Dom.getAncestorByTagName(img_elem, ‘form’).encoding = ‘multipart/form-data’; they will show. Do you know, what is going on here.
Great solution you’ve made! I’ve almost got my own version working.
Trying to solve why does it not load the image into the editor, when it DOES load it to the server?
is there anything specific I look for , there seems to be maybe and issue with the path variable that gets passed back, im thinking.
is it okay to use ‘http://localhost.com/’ . $Path for example?
thanks for the great addition to the YUI !
cheers
kreviii, fire up firebug and watch the requests for what’s happening. Its likely that you’re not returning the appropriate json fragment for the ImageUpload to read.
Oh it firebug doesn’t recognize it as an XHR request because of the whole iframe thing, i think.
Jbrennon & Ibrahima: Can you give more details? Which browser are you trying. It’s working for me with all major browsers on all platforms I’ve tested so far. I can’t say I’ve hit every possible combination though. Like Don just said: Firebug is your friend.
@Jbrennon & Ibrahima: You might need FORM tags around your textarea with enctype=”multipart/form-data”
can I change default font size to 12px?
I’m not sure which font size you’re referring to, but pretty much everything is customizable with the correct style sheets. Use Firefox/Firebug to find out which style sheet is controlling the element you are interested in.
can anyone give me php code into asp.net(VB) format
Thanks
Thank you Dennis. I found it in file ‘editer-min.js’.
Hello. I am trying to use the 2.7 version, but am receiving an error which is preventing the upload of the image to my server. Specifically:
this._formNode.submit is not a function
line 8 of connection-min.js
Any ideas?
I know my upload PHP script is working fine because I can post directly to it and it indeed uploads the image, but the YUI RTE w/image upload component is breaking before it ever sends the image.
Thanks in advance,
Ed
Does your browser work on this site’s example?
Having trouble with this on Safari with YUI 2.8r4. Works fine in Firefox though. Going to try 2.7, I’ll report back.
Figured out my problem. I’m using Java and Stripes instead of PHP, and I’m not sure if that’s the reason, but my upload was returning the JSON with a modified pre tag:
{“image_url”:”/imageUpload.action?fetch=&fileName=15.gif”,”status”:”UPLOADED”}
This wasn’t being stripped properly so I changed one line to fix it:
// strip pre tags if they got added somehow resp=r.responseText.substring(r.responseText.indexOf(“{“), r.responseText.lastIndexOf(“}”)+1);
Hi Dennis, thanks for the reply. Yes – your sample here on the site works fine. If you’re willing to take a look I would be happy to send you the URL’s – I can’t post them publicly, however.
Hello,
I’m having problems with the image-uploader on the yui editor (version 2.7.0)
When I upload an image, I get a correct JSON response from my server-side PHP script. I see the script put the correct URL in the ‘_insertimage_url’ field (placed temporary alert to check) but after the double focus() the content of the ‘_insertimage_url’ field changed again to the original value ‘Image URL Here’. Because of this no image is shown in the editor.
Does anyone know how to fix this?
Thanks in advance,
Eelko
Do the examples on this site work for you? Make sure your server is serving the image at the directory returned by your JSON response. I always use FireFox/FireBug to see what is going on.
Yes the sample on this page works fine.
I tried using the script with 2.6 it didn’t upload with 2.7 i don’t see the browse button so i’m blocked here i can’t use the 2.6 nor the 2.7. although i followed your step copy & pasted & changed what we have to change
any help
Does it work on this site for you?
To anyone who encounters the “this._formNode.submit is not a function” error note that your form submit button must not be named “submit”. Cheers!
Hi Dennis,
First of all thanks for your code, image upload directly into a rich text editor is an essential feature.
I have written some ASP.net code that implements what you have written. It would be great if you could post it on your site. The URL is http://www.mostynwebsolutions.com/Yui-Image-Uploader-ASP-DOT-NET.aspx
Thanks and Regards,
Tom
I’ll add a post thanks!
[...] Update 07/01/09: I've added a working example with the 2.6 uploader and YUI 2.7. YUI 2.7 Image Uploader [...]
By using Firefox 3.5.7 with Noscript extension (1.9.9.36) installed and disabled on current page, the image doesn’t seem to upload and does not appear on YUI Editor. If I set “allow scripts globally” it doesn’t work either. However, if I disable Noscript extension, it works fine. Any ideas?
Leave A Reply