Image Upload with YUI Editor 2.5.0

The YUI team has been making further enhancements to the YUI library. I decided to stick together in one post all the previous resources I’ve added for the YUI Image Uploader and make sure the uploader was compatible with the latest version of the YUI Rich Text Editor.

Image Uploader Client Code

To use upload images into the YIU Rich text editor, you have to add an additional javascript dependency to the list of JavaScript files for the editor. Here is the link for the the dependency and instructions on using the image uploader extension:

YIU Rich Text Editor Image Upload Extension.

Image Uploader Server Code

To upload images, you’ll need to provide some server functionality. The image needs to be stored on a server and made available for the web browser to display and the client to further manipulate. You can do this an about any programming language or server environment but the method will be unique to your particular language. I’ve provided examples for two languages:

YUI Image Uploader with Python/Turbogears
YUI Image Uploader with PHP

YUI Rich Text Editor 2.5.0 Example

Here is an example that uses the 2.5.0 YUI library and the PHP server code:


I did a quick test and was able to upload images in both Safari and FireFox. Enjoy!

13 thoughts on “Image Upload with YUI Editor 2.5.0”

  1. Hi Dennis, I just want to say thanks a lot for your example, it gives me a better idea of how to tweak the Yui Editor.

    I would like to know if you can help me, I want to change the default size inputs of the Yui Editor and replace or override it with some radio buttons with predefined sizes. Do I need to know some element identifier to replace? or some other technique? any help would be greatly appreciated.
    Thanks

  2. Do you have FireFox w/ FireBug installed? That is the hands down easiest way to find out what needs to be replaced. Just use the “INSPECT” feature on the dailog.

    2nd, it ought to be fairly easy to create some custom DOM objects and replace what you like. The only thing I can think of that would be a problem is if any of the items you are replacing send or respond to events within the rest of the editor. You’ll have to watch that.

    Feel free to use my code as an example or starting point.j

    -Dennis

  3. I am trying to use the uploader, and I have an asp script handling the upload which works fine. After I hit the upload link, I see the url flash for a split second, then “Image URL here” is back in place and nothing else happens? Can you help?

  4. A comment in your code says: IE will
    try to open a new document window when the response is returned if your
    content-type header on your response is not set to ‘text/javascript’

    However, I find this to not work. For IE, I need to set the content-type of the ajax response to ‘text/html’.

  5. You’re correct. The code is a typo. I meant text/html but I wrote the comment in hindsight and accidentally wrote text/javascript.

  6. hi, Dennis:

    i install your rich-text,but i have a peoblem.
    image have upload but rich-text’s textarea is not display image url … why ?!

    my english is poor … i hope you understand what i say…

Leave a Reply

Your email address will not be published. Required fields are marked *