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 is done by creating a
textarea control on the page.
textarea is on the page, then initialize the Editor like this:
To do this, we need start after the toolbar is loaded using the
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.
From the popup window, we gain access to the Editor using the
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.
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.
Note: Logging and debugging is currently turned off for this example.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.