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 Responses to “Image Upload with YUI Editor 2.5.0”


  1. robert

    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. Dennis

    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. robert

    Thank you very much Dennis

  4. alicia

    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?

  5. robert

    Hi,
    I did some changes to the YUI Text Editor uploader extension and the backend PHP script, here it is:
    yui uploader update

    I hope it could be useful. Thanks

  6. Dennis

    Alicia, Can you post a link to your project that is having the problem?

  7. mettaben

    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’.

  8. Dennis

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

  9. Nany

    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…

  10. satheesh

    i need full coding of text editor.. please send me asap

  11. Tom Arnfeld

    Hey πŸ™‚
    I am using YUI2 Editor but it doesn’t seem to be working… im not sure why πŸ™

    Any ideas?

  12. Tom Arnfeld

    Oh and im using 2.8.0r4 πŸ™‚

  13. Dennis

    Firefox+Firebug. 2.7.0 is the latest I’ve tested with by the way.
    Image Uploader with YUI 2.7.0



css.php