rich text editor

I‘ve had nothing but good things to say about theYahoo 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 therich 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:
Place the required source code dependencies for YUI Editor and YUI Connection Manager in your html.













Download the yuiImageUploader Source and add it to your included javascript dependencies

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();
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.‘} 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:

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 filehere.
Enjoy.
Update:
I‘ve created another post that shows a working examplehere.
Update:
I‘ve added another example, this time with the server side script beingimplemented in PHP.