YUI Library Home

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

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.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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