This example adds a button to the Rich Text Editor's Toolbar that displays an Overlay Control with a list of icon images.
Click the Icon button () in the toolbar to display the Overlay.
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:
Now we can create a button and add it to the Editor's Toolbar. First we subscribe to the Editor's
toolbarLoaded Custom Event.
From inside that function we will setup a new button config object literal with the following properties:
YAHOO.widget.Overlayinstance to be used as a menu.
Now add it to the Toolbar group called "insertitem" like this:
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-inserticon span.yui-toolbar-icon
Second is the selected state, that can be accessed via this CSS rule:
.yui-toolbar-container .yui-button-inserticon-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 buttons config. It is used for specific styling of a button that may appear in several places on the page.
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.