YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI Library Examples: Rich Text Editor: Icon Insertion

Rich Text Editor: Icon Insertion

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

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:

Creating the Toolbar Button and Menu

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:

  • type: (push, menu, split, spin, select, color)
  • label: The text string displayed on the button
  • value: The value is also called the Command for the button.
  • menu: A YAHOO.widget.Overlay instance to be used as a menu.

Now add it to the Toolbar group called "insertitem" like this: myEditor.toolbar.addButtonToGroup(imgConfig, 'insertitem');

Styling the Button

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.

The Style Rules to Create the Icon Button in This Example

Full Example Javascript Source

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings