Before you begin: Read the updates at the bottom of the page. This post was written for an older version of the YUI library.

I've had nothing but good things to say about the Yahoo User Interface tools. It seems to me like the developers continually add all the things from other libraries that I like into one simple to use, well documented, overall good quality library.

The new addition of the rich text editor has left me no less pleased. I can now ditch the other editors I've used in the past in favor of one that will be maintained. (I've tried two that worked, but were becoming out-dated and didn't really have support.)

Yahoo's RTE has a great dialog for modifying images. You can't use it to upload images from your computer however. So far, every situation I've needed an RTE has called for the ability to add images from the users hard drive. I've created an extension that modifies the RTE image dialog to include a new input for browsing to an image. It uses the Yahoo Connection manager to upload the image in the background to your server, and then displays the image in the RTE after the file is successfully uploaded.

Here is how to use it:

  1. Place the required source code dependencies for YUI Editor and YUI Connection Manager in your html.
    <!-- Skin CSS file -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/assets/skins/sam/skin.css">
    <!-- Utility Dependencies -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/element/element-beta-min.js"></script>
    <!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
    <script src="http://yui.yahooapis.com/2.3.1/build/container/container_core-min.js"></script>
    <script src="http://yui.yahooapis.com/2.3.1/build/menu/menu-min.js"></script>
    <script src="http://yui.yahooapis.com/2.3.1/build/button/button-beta-min.js"></script>
    <!-- Source file for Rich Text Editor-->
    <script src="http://yui.yahooapis.com/2.3.1/build/editor/editor-beta-min.js"></script>
    <!-- Source for Connection Manager (Required for yuiImageUploader) -->
    <script src="http://yui.yahooapis.com/2.3.1/build/connection/connection-min.js"></script>
  2. Download the yuiImageUploader Source and add it to your included javascript dependencies
    <script src="/yui-image-uploader.js"></script>
  3. Instantiate your editor the same as you normally do. Then modify it with the yuiImageUploader function. The parameters for the function are the editor instance, the url to upload the file to, and the parameter name that the file will be uploaded with.
    var myEditor=new YAHOO.widget.Editor('rte_div',cfg);
    yuiImgUploader(myEditor, '/upload_url','param_name');
    myEditor.render();
  4. Implement your upload handler on your server. I'm assuming if you're looking for this functionality, you already know how to do this. The important thing is the response. The content of the response is a JSON object. You must return a response with the Content-Type header set to 'text/html' however, because IE will attempt to open the response in a new window if the Content-Type header is something other than 'text/html'. Your object needs to have a status and an image_url variable. For a successful response, just return:
    {status:'UPLOADED',image_url:'/the/url/of/the/image'}
    For a failure, modify the status variable to be an error message that can be shown to the user:
    {status:'The image was too big.'}
  5. When your users click on the image button on the RTE editor, the yuiImageUploader modifies the image dialog to have an additional file field for uploading an image:

    YUI RTE Image Uploader

    The upload is done in the background with the Connect object provided by Yahoo's Connection Manager. If everything works ok, the URL returned by the server is placed in the image url input and the image is shown in the editor.

That's it. You can download the file here.

Enjoy.

Update:
I've created another post that shows a working example here.

Update:
I've added another example, this time with the server side script being implemented in PHP.

Update 10/31/08:
Thanks to bkinsey for providing updates to the client script for use with YUI 2.6. You can see his comment below or I've added downloadable file here.

Update 11/6/08:
I corrected errors in the script and added a working YUI 2.6 Image Uploader example.

Update 02/16/09:
Vijay Oruganty has provided a Java upload handler for the YUI image uploader.

Update 07/01/09:
I've added a working example with the 2.6 uploader and YUI 2.7. YUI 2.7 Image Uploader

Update 06/16/10:
Working example with YUI 2.8.1 added. Tagged the uploader git repository tag_v2.8.1. YUI 2.8.1 Image Uploader