YUI Library Examples: Rich Text Editor (beta): Icon Insertion

Rich Text Editor (beta): 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

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More Rich Text Editor (beta) Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

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