YUI Library Home

Site Search (YDN & YUIBlog):

# 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.

View example in new window.

This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>

## Setting up the Editor's HTML

Setting up the Editor's HTML is done by creating a `textarea` control on the page.

<form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> <font face="Times New Roman">This is some more test text. This is some more <b>test <i>text</i></b></font>. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. </textarea> </form>

## Setting up the Editor's Javascript

Once the `textarea` is on the page, then initialize the Editor like this:

(function() { //Setup some private variables var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; //The Editor config var myConfig = { height: '300px', width: '600px', animate: true, dompath: true, focusAtStart: true }; //Now let's load the Editor.. var myEditor = new YAHOO.widget.Editor('editor', myConfig); })();

## 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');`

//Snipped from above var myEditor = new YAHOO.widget.Editor('editor', myConfig); //Subscribe to the toolbarLoaded Custom event fired in render myEditor.on('toolbarLoaded', function() { //Setup the config for the new "Insert Icon" button var imgConfig = { type: 'push', //Using a standard push button label: 'Insert Icon', //The name/title of the button value: 'inserticon', //The "Command" for the button menu: function() { //Create the Overlay instance we are going to use for the menu var menu = new YAHOO.widget.Overlay('inserticon', { width: '165px', height: '210px', visible: false }); var str = ''; for (var a = 0; a < 9; a++) { for (var i = 1; i < 9; i++) { str += '<img src="assets/suit' + i + '.gif">'; } } //Setting the body of the container to our list of images. menu.setBody('<div id="iconMenu">' + str + '</div>'); menu.beforeShowEvent.subscribe(function() { //Set the context to the bottom left corner of the Insert Icon button menu.cfg.setProperty('context', [ myEditor.toolbar.getButtonByValue('inserticon').get('element'), 'tl', 'bl' ]); }); menu.render(document.body); menu.element.style.visibility = 'hidden'; //return the Overlay instance here return menu; }() //This fires the function right now to return the Overlay Instance to the menu property.. }; //Add the new button to the Toolbar Group called insertitem. myEditor.toolbar.addButtonToGroup(imgConfig, 'insertitem'); myEditor.toolbar.on('inserticonClick', function(ev) { var icon = ''; this._focusWindow(); if (ev.icon) { icon = ev.icon; } this.execCommand('inserthtml', '<img src="' + icon + '" border="0">'); }, myEditor, true); }); myEditor.render(); })();

## 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

.yui-skin-sam .yui-toolbar-container .yui-toolbar-inserticon span.yui-toolbar-icon { background-image: url( assets/suits_default.gif ); background-position: 1px 0px; } .yui-skin-sam .yui-toolbar-container .yui-button-insertdate-selected span.yui-toolbar-icon { background-image: url( assets/suits_active.gif ); background-position: 1px 0px; }

## Full Example Javascript Source

(function() { var myConfig = { height: '300px', width: '600px', animate: true, dompath: true, focusAtStart: true }; myEditor = new YAHOO.widget.Editor('editor', myConfig); YAHOO.util.Event.onAvailable('iconMenu', function() { YAHOO.util.Event.on('iconMenu', 'click', function(ev) { var tar = YAHOO.util.Event.getTarget(ev); if (tar.tagName.toLowerCase() == 'img') { var img = tar.getAttribute('src', 2); var _button = this.toolbar.getButtonByValue('inserticon'); _button._menu.hide(); this.toolbar.fireEvent('inserticonClick', { type: 'inserticonClick', icon: img }); } YAHOO.util.Event.stopEvent(ev); }, myEditor, true); }); myEditor.on('toolbarLoaded', function() { var imgConfig = { type: 'push', label: 'Insert Icon', value: 'inserticon', menu: function() { var menu = new YAHOO.widget.Overlay('inserticon', { width: '165px', height: '210px', visible: false }); var str = ''; for (var a = 0; a < 9; a++) { for (var i = 1; i < 9; i++) { str += '<a href="#"><img src="assets/suit' + i + '.gif" border="0"></a>'; } } menu.setBody('<div id="iconMenu">' + str + '</div>'); menu.beforeShowEvent.subscribe(function() { menu.cfg.setProperty('context', [ myEditor.toolbar.getButtonByValue('inserticon').get('element'), 'tl', 'bl' ]); }); menu.render(document.body); menu.element.style.visibility = 'hidden'; return menu; }() }; myEditor.toolbar.addButtonToGroup(imgConfig, 'insertitem'); myEditor.toolbar.on('inserticonClick', function(ev) { var icon = ''; this._focusWindow(); if (ev.icon) { icon = ev.icon; } this.execCommand('inserthtml', '<img src="' + icon + '" border="0">'); }, myEditor, true); }); myEditor.render(); })();

## 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.

### 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.

### Rich Text Editor Examples:

- Flickr Image Search
- Calendar Plugin
- Icon Insertion
- Plain Text Switcher
- Editor Data Post with Connection Manager
- Skinning the Editor
- Default Toolbar Config
- Code Editor
- Editor inside a Tabview Control
- One Editor, Multiple Edit Areas
- Editor with Custom Image Browser
- Simple Editor — Basic Buttons
- Simple Editor — Advanced Buttons
- Editor — Basic Buttons
- Editor Auto Adjusting Height
- Editor in a Dialog Control
- Custom resizing for the Rich Text Editor (included with examples for Resize Utility)
- Simple Application (included with examples for Layout Manager)
- Complex Application (included with examples for Layout Manager)

### More Rich Text Editor Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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