YUI Library Home

YUI Library Examples: Rich Text Editor: Editor with Custom Image Browser

Rich Text Editor: Editor with Custom Image Browser

This example will show how to open an "Image Browser" for the YUI Rich Text Editor.

Note: The "Image Browser" window will probably be blocked by your popup blocker.

Now, click on the "Insert Image" icon (the one outlined in blue) to see the "Image Browser" window.

Setting up the Editor's HTML

Setting up the Editor's HTML is done by creating a textarea control on the page.

Setting up the Editor's Javascript

Once the textarea is on the page, then initialize the Editor like this:

Modifying the Insert Image Button

To do this, we need start after the toolbar is loaded using the toolbarLoaded event.

Now we use the Editor's _getSelectedElement method to see if we have an image selected or not.

If we have an image selected, we don't do anything. But if we don't have one selected, we need to pop open the new window.

Note: the return false. This will stop the event from continuing, the Editor will not attempt to add a blank image.

Inserting the image into the Editor from the popup window

From the popup window, we gain access to the Editor using the static method YAHOO.widget.EditorInfo.getEditorById(). Calling it from window.opener will give us a usable reference to the Editor in the other browser window.

How you get the image to display and how you allow the end user to select an image is up to your implementation. Here we are simply applying a click listener to the images parent container and getting a reference to the image from the event.

Once we have a reference or a URL to the image we want to insert, we simply call the Editors execCommand for insert image and close the window.

Keeping them from editing the URL of the image

This little piece of code will set the image url field in the Image Property Editor to disabled.

This will prevent the user from changing the images url.

Full Javascript Source for this window

Full Javascript Source for the Image Browser Window

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings