This example provides a new button () in the toolbar that opens a custom panel.
This custom panel contains an AutoComplete Control that queries Flickr for tags and displays the images.
A selected image will be inserted into the Editor for ease of use.
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:
Here we subscribe to the
toolbarLoaded Custom Event and create the new Button (
flickr). After adding it to the group called
insertitem, we subscribe to it's
flickrClick Custom Event.
Inside this Custom Event, we set the
STOP_EXEC_COMMAND var to
true, which will keep the Editor from trying to run
Then we call
gutter.toggle() which will either hide or show our custom panel.
There are 2 important states to style a button in the toolbar.
First is the default state, that can be accessed via this CSS rule:
.yui-toolbar-container .yui-toolbar-flickr span.yui-toolbar-icon
Second is the selected state, that can be accessed via this CSS rule:
.yui-toolbar-container .yui-toolbar-flickr-selected span.yui-toolbar-icon
.yui-toolbar-container is the class applied to the top-most container of the toolbar.
.yui-toolbar-icon is an extra
SPAN injected into the button for spriting an image.
.yui-toolbar-VALUE is a dynamic class added to the button based on the
value passed into the button's config. It is used for specific styling of a button that may appear in several places on the page.
The gutter in this example is not part of the Editor, but could easily be modified to do other things.
First we wait until
flickr_search is available on the page. Then we set up a click handler on
flickr_results to see if the user clicked an image.
If an image is clicked, we will call
myEditor.execCommand('insertimage', IMG) to insert the image into the Editor.
This Autocomplete control uses a DataSource that points to Flickr Web Services; Flickr returns XML data via a simple PHP proxy. In order to return valid data from the Flickr application, scriptQueryParameter has been customized to be tags, and scriptQueryAppend is used to pass in additional required arguments. The cache has been disabled so that each query is forced to make a trip to the live application.
This instance of AutoComplete defines a robust custom formatResult function that parses result data into custom HTML markup that displays an actual image from the Flickr server. Automatic highlighting of the first result item in the container has been disabled by setting autoHighlight to false.
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.