YUI Library Home

Site Search (YDN & YUIBlog):

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

View example in new window.

This is a test

## Setting up the Editor's HTML

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

<form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text. <font face="Times New Roman">This is some more test text. This is some more <b>test <i>text</i></b></font>. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. </textarea> </form>

## Setting up the Editor's Javascript

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

//The Editor config var myConfig = { height: '300px', width: '600px', animate: true, dompath: true }; //Now let's load the Editor. var myEditor = new YAHOO.widget.Editor('editor', myConfig);

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

myEditor.on('toolbarLoaded', function() { //When the toolbar is loaded, add a listener to the insertimage button this.toolbar.on('insertimageClick', function() { //Get the selected element var _sel = this._getSelectedElement(); //If the selected element is an image, do the normal thing so they can manipulate the image if (_sel && _sel.tagName && (_sel.tagName.toLowerCase() == 'img')) { //Do the normal thing here.. } else { //They don't have a selected image, open the image browser window win = window.open('assets/browser.php', 'IMAGE_BROWSER', 'left=20,top=20,width=500,height=500,toolbar=0,resizable=0,status=0'); if (!win) { //Catch the popup blocker alert('Please disable your popup blocker!!'); } //This is important.. Return false here to not fire the rest of the listeners return false; } }, this, true); }, myEditor, true);

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

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, myEditor = window.opener.YAHOO.widget.EditorInfo.getEditorById('msgpost'); //Get a reference to the editor on the other page //Add a listener to the parent of the images Event.on('images', 'click', function(ev) { var tar = Event.getTarget(ev); //Check to see if we clicked on an image if (tar && tar.tagName && (tar.tagName.toLowerCase() == 'img')) { //Focus the editor's window myEditor._focusWindow(); //Fire the execCommand for insertimage myEditor.execCommand('insertimage', tar.getAttribute('src', 2)); //Close this window window.close(); } }); //Internet Explorer will throw this window to the back, this brings it to the front on load Event.on(window, 'load', function() { window.focus(); }); })();

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

myEditor.on('afterOpenWindow', function() { //When the window opens, disable the url of the image so they can't change it var url = Dom.get(myEditor.get('id') + '_insertimage_url'); if (url) { url.disabled = true; } }, myEditor, true);

## Full Javascript Source for this window

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, win = null; var myEditor = new YAHOO.widget.Editor('msgpost', { height: '300px', width: '522px', dompath: true, //Turns on the bar at the bottom animate: true //Animates the opening, closing and moving of Editor windows }); myEditor.on('toolbarLoaded', function() { //When the toolbar is loaded, add a listener to the insertimage button this.toolbar.on('insertimageClick', function() { //Get the selected element var _sel = this._getSelectedElement(); //If the selected element is an image, do the normal thing so they can manipulate the image if (_sel && _sel.tagName && (_sel.tagName.toLowerCase() == 'img')) { //Do the normal thing here.. } else { //They don't have a selected image, open the image browser window win = window.open('assets/browser.php', 'IMAGE_BROWSER', 'left=20,top=20,width=500,height=500,toolbar=0,resizable=0,status=0'); if (!win) { //Catch the popup blocker alert('Please disable your popup blocker!!'); } //This is important.. Return false here to not fire the rest of the listeners return false; } }, this, true); }, myEditor, true); myEditor.on('afterOpenWindow', function() { //When the window opens, disable the url of the image so they can't change it var url = Dom.get(myEditor.get('id') + '_insertimage_url'); if (url) { url.disabled = true; } }, myEditor, true); myEditor.render(); })();

## Full Javascript Source for the Image Browser Window

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, myEditor = window.opener.YAHOO.widget.EditorInfo.getEditorById('msgpost'); //Get a reference to the editor on the other page //Add a listener to the parent of the images Event.on('images', 'click', function(ev) { var tar = Event.getTarget(ev); //Check to see if we clicked on an image if (tar && tar.tagName && (tar.tagName.toLowerCase() == 'img')) { //Focus the editor's window myEditor._focusWindow(); //Fire the execCommand for insertimage myEditor.execCommand('insertimage', tar.getAttribute('src', 2)); //Close this window window.close(); } }); })();

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

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Rich Text Editor Examples:

- Flickr Image Search
- Calendar Plugin
- Icon Insertion
- Plain Text Switcher
- Editor Data Post with Connection Manager
- Skinning the Editor
- Default Toolbar Config
- Code Editor
- Editor inside a Tabview Control
- One Editor, Multiple Edit Areas
- Editor with Custom Image Browser
- Simple Editor — Basic Buttons
- Simple Editor — Advanced Buttons
- Editor — Basic Buttons
- Editor Auto Adjusting Height
- Editor in a Dialog Control
- Custom resizing for the Rich Text Editor (included with examples for Resize Utility)
- Simple Application (included with examples for Layout Manager)
- Complex Application (included with examples for Layout Manager)

### More Rich Text Editor Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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