Example YUI Image upload with YUI 2.6.0
I wanted to add an example of the yuiImgUploader script working with YUI version 2.6.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.
That changes from the previous 2.5 Image uploader are quite small. If you were using a pre 2.6 version of the editor, simply change the location of a couple scripts and add your editor name to the yuiImgUploader function parameters.
Here is the new yui-image-uploader26.js file.
Here is the initialization JavaScript for the editor on this page. You can find information on Yahoo's Rich text editor here.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/skin.css" /> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script> <script src="http://yui.yahooapis.com/2.6.0/build/container/container_core-min.js"></script> <script src="http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js"></script> <script src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script> <script src="http://yui.yahooapis.com/2.6.0/build/editor/editor-min.js"></script> <script src="http://yui.yahooapis.com/2.6.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 }); /* Don't forget to replace yuiImgUploader parameters with proper values for your server. */ 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.
6 users commented in " Example YUI Image upload with YUI 2.6.0 "
Follow-up comment rss or Leave a TrackbackGreat ap, thx :o)
I’ve been writing a new application of MyGenesis CMS using the YUI rich text, your upload mod is perfect. Works great, however, one thing I noticed with the upload php script, it uploads images under the server name which causes permission errors. To fix this just add a chmod to it like so
$hout=fopen($path,”w”);
$chmod = chmod($path, 0766); //set the appropriate permissions.
fwrite($hout,$image);
fclose($hout);
on another subject, I’m trying to figure out how to change the style within the textarea, can’t find any documentation on it though, any ideas?
thx,
Karen
Me again >.< I’ve searched for days to implement custom css in the iframe, finally found a post by Dave Glass so I implemented it with your image upload, just in case anyone else is looking for something similar, here’s the code
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var myConfig = {
height: ‘300px’,
width: ‘522px’,
handleSubmit: true,
dompath: true,
animate: true
};
var myEditor = new YAHOO.widget.Editor(’msgpost’, myConfig);
myEditor.on(’editorContentLoaded’, function() {
var head = this._getDoc().getElementsByTagName(’head’)[0];
var link = this._getDoc().createElement(’link’);
link.setAttribute(’rel’, ’stylesheet’);
link.setAttribute(’type’, ‘text/css’);
link.setAttribute(’href’, ‘editor.css’);
head.appendChild(link);
var link2 = this._getDoc().createElement(’link’);
link2.setAttribute(’rel’, ’stylesheet’);
link2.setAttribute(’type’, ‘text/css’);
link2.setAttribute(’href’, ‘editor.css’);
head.appendChild(link2);
}, myEditor, true);
yuiImgUploader(myEditor, ‘msgpost’, ‘img2.php’,'image’);
myEditor.render();
dp.SyntaxHighlighter.HighlightAll(’code’);
})();
of course change the editor.css file to your css file location.
Best Regards,
Karen
Hi Mr. Dennis,
I have a problem with my code. The image upload script (yui-img-uploader.php) is not initiating when i select the pic to upoad.
Please help me out here…
This is my code:
var myEditor = new YAHOO.widget.Editor(’text234′, {
height: ‘300px’,
width: ‘522px’,
handlesubmit: true,
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
yuiImgUploader(myEditor, ‘text234′, ‘/app/webroot/yui-image-uploader.php’,'image’);
myEditor.render();
//Inside an event handler after the Editor is rendered
YAHOO.util.Event.on(’submit’, ‘click’, function() {
//Put the HTML back into the text area
myEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = myEditor.get(’element’).value;
});
*Note: I’m using this on cakePHP.
Have you installed FireBug (for FireFox) and enabled YAHOO logging? Most people find the problem pretty fast after watching for the appropriate log messages.
@Aneesh Just guessing but you shouldn’t need /app/webroot/ because cakephp will direct it to there anyway.
[...] 原文參考自：Example YUI Image upload with YUI 2.6.0 [...]
Leave A Reply