YUI Library Examples: Rich Text Editor: Icon Insertion

Setting up the Editor's HTML

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


1	<form method="post" action="#" id="form1">
2	<textarea id="editor" name="editor" rows="20" cols="75">
3	<font face="Times New Roman">This is some more test text. This is some more <b>test <i>text</i></b></font>.
4	This is some more test text. This is some more test text. This is some more test text.
5	This is some more test text. This is some more test text. This is some more test text.
6	This is some more test text.
7	</textarea>
8	</form>
	view plain \| print \| ?

Setting up the Editor's Javascript

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


1	(function() {
2	//Setup some private variables
3	var Dom = YAHOO.util.Dom,
4	Event = YAHOO.util.Event;
5
6	//The Editor config
7	var myConfig = {
8	height: '300px',
9	width: '600px',
10	animate: true,
11	dompath: true,
12	focusAtStart: true
13	};
14
15	//Now let's load the Editor..
16	var myEditor = new YAHOO.widget.Editor('editor', myConfig);
17
18	})();
	view plain \| print \| ?

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


1	//Snipped from above
2	var myEditor = new YAHOO.widget.Editor('editor', myConfig);
3
4	//Subscribe to the toolbarLoaded Custom event fired in render
5	myEditor.on('toolbarLoaded', function() {
6
7	//Setup the config for the new "Insert Icon" button
8	var imgConfig = {
9	type: 'push', //Using a standard push button
10	label: 'Insert Icon', //The name/title of the button
11	value: 'inserticon', //The "Command" for the button
12	menu: function() {
13	//Create the Overlay instance we are going to use for the menu
14	var menu = new YAHOO.widget.Overlay('inserticon', {
15	width: '165px',
16	height: '210px',
17	visible: false
18	});
19	var str = '';
20	for (var a = 0; a < 9; a++) {
21	for (var i = 1; i < 9; i++) {
22	str += '<img src="assets/suit' + i + '.gif">';
23	}
24	}
25	//Setting the body of the container to our list of images.
26	menu.setBody('<div id="iconMenu">' + str + '</div>');
27	menu.beforeShowEvent.subscribe(function() {
28	//Set the context to the bottom left corner of the Insert Icon button
29	menu.cfg.setProperty('context', [
30	myEditor.toolbar.getButtonByValue('inserticon').get('element'),
31	'tl',
32	'bl'
33	]);
34	});
35	menu.render(document.body);
36	menu.element.style.visibility = 'hidden';
37	//return the Overlay instance here
38	return menu;
39	}() //This fires the function right now to return the Overlay Instance to the menu property..
40	};
41	//Add the new button to the Toolbar Group called insertitem.
42	myEditor.toolbar.addButtonToGroup(imgConfig, 'insertitem');
43
44	myEditor.toolbar.on('inserticonClick', function(ev) {
45	var icon = '';
46	this._focusWindow();
47	if (ev.icon) {
48	icon = ev.icon;
49	}
50	this.execCommand('inserthtml', '<img src="' + icon + '" border="0">');
51	}, myEditor, true);
52
53	});
54	myEditor.render();
55	})();
	view plain \| print \| ?

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


1	.yui-skin-sam .yui-toolbar-container .yui-toolbar-inserticon span.yui-toolbar-icon {
2	background-image: url( assets/suits_default.gif );
3	background-position: 1px 0px;
4	}
5	.yui-skin-sam .yui-toolbar-container .yui-button-insertdate-selected span.yui-toolbar-icon {
6	background-image: url( assets/suits_active.gif );
7	background-position: 1px 0px;
8	}
	view plain \| print \| ?

Full Example Javascript Source


1	(function() {
2	var myConfig = {
3	height: '300px',
4	width: '600px',
5	animate: true,
6	dompath: true,
7	focusAtStart: true
8	};
9
10	myEditor = new YAHOO.widget.Editor('editor', myConfig);
11
12	YAHOO.util.Event.onAvailable('iconMenu', function() {
13	YAHOO.util.Event.on('iconMenu', 'click', function(ev) {
14	var tar = YAHOO.util.Event.getTarget(ev);
15	if (tar.tagName.toLowerCase() == 'img') {
16	var img = tar.getAttribute('src', 2);
17	var _button = this.toolbar.getButtonByValue('inserticon');
18	_button._menu.hide();
19	this.toolbar.fireEvent('inserticonClick', { type: 'inserticonClick', icon: img });
20	}
21	YAHOO.util.Event.stopEvent(ev);
22	}, myEditor, true);
23	});
24
25
26	myEditor.on('toolbarLoaded', function() {
27
28	var imgConfig = {
29	type: 'push', label: 'Insert Icon', value: 'inserticon',
30	menu: function() {
31	var menu = new YAHOO.widget.Overlay('inserticon', {
32	width: '165px',
33	height: '210px',
34	visible: false
35	});
36	var str = '';
37	for (var a = 0; a < 9; a++) {
38	for (var i = 1; i < 9; i++) {
39	str += '<a href="#"><img src="assets/suit' + i + '.gif" border="0"></a>';
40	}
41	}
42	menu.setBody('<div id="iconMenu">' + str + '</div>');
43	menu.beforeShowEvent.subscribe(function() {
44	menu.cfg.setProperty('context', [
45	myEditor.toolbar.getButtonByValue('inserticon').get('element'),
46	'tl', 'bl'
47	]);
48	});
49	menu.render(document.body);
50	menu.element.style.visibility = 'hidden';
51	return menu;
52	}()
53	};
54	myEditor.toolbar.addButtonToGroup(imgConfig, 'insertitem');
55
56	myEditor.toolbar.on('inserticonClick', function(ev) {
57	var icon = '';
58	this._focusWindow();
59	if (ev.icon) {
60	icon = ev.icon;
61	}
62	this.execCommand('inserthtml', '<img src="' + icon + '" border="0">');
63	}, myEditor, true);
64
65	});
66	myEditor.render();
67	})();
	view plain \| print \| ?

(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.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 Library Examples: Rich Text Editor: Icon Insertion

X^

To close this window use the Control + Shift + W key

Setting up the Editor's HTML

Setting up the Editor's Javascript

Creating the Toolbar Button and Menu

Styling the Button

The Style Rules to Create the Icon Button in This Example

Full Example Javascript Source

Configuration for This Example

YUI Logger Output:

Logger Console

Rich Text Editor Examples:

More Rich Text Editor Resources:

YUI Library Examples: Rich Text Editor: Icon Insertion

Rich Text Editor: Icon Insertion

X^

To close this window use the Control + Shift + W key

Size:

Text Flow:

Padding:

Border:

Text Editing Tools

Font Name and Size

Font Style

Undo/Redo

Alignment

Paragraph Style

Indenting and Lists

Insert Item

This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Control + Shift + T to place focus on the toolbar and navigate between option heading names.

Common formatting keyboard shortcuts:

You have left the Rich Text Editor.

Setting up the Editor's HTML

Setting up the Editor's Javascript

Creating the Toolbar Button and Menu

Styling the Button

The Style Rules to Create the Icon Button in This Example

Full Example Javascript Source

Configuration for This Example

YUI Logger Output:

Logger Console

Rich Text Editor Examples:

More Rich Text Editor Resources: