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

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

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

Full Example Javascript Source

(function() {
    var myConfig = {
        height: '300px',
        width: '530px',
        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.render();
})();

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.