YUI Library Examples: Rich Text Editor: Editor inside a Tabview Control

Setting up the HTML

First we will begin by adding a simple div to the page with the id of e_tabs.


1	<style>
2	.yui-content {
3	height: 250px;
4	}
5	.yui-content textarea {
6	visibility: hidden;
7	}
8	</style>
9	<div id="e_tabs"></div>
	view plain \| print \| ?

Setting up the TabView Javascript

Next we need to create the TabView control.


1	(function() {
2	//Setup some private variables
3	var Dom = YAHOO.util.Dom,
4	Event = YAHOO.util.Event;
5
6	var myTabs = new YAHOO.widget.TabView('e_tabs');
7	})();
	view plain \| print \| ?

Now let's add some tabs

Now that we have created the Tabview control, we can add some tabs.

Note that we are saving a reference to the tab containing the Editor's textarea in the variable called editorTab


1	YAHOO.log('Add the first tab..', 'info', 'example');
2	myTabs.addTab( new YAHOO.widget.Tab({
3	label: 'Tab One Label',
4	content: '<p>Tab One Content</p>',
5	active: true
6	}));
7
8	YAHOO.log('Add the editor tab..', 'info', 'example');
9	editorTab = new YAHOO.widget.Tab({
10	label: 'Editor Tab',
11	content: '<textarea id="editor">This is the editor content.. You can edit me!</textarea>'
12	});
13
14	myTabs.addTab(editorTab);
15
16	YAHOO.log('Add the third tab..', 'info', 'example');
17	myTabs.addTab( new YAHOO.widget.Tab({
18	label: 'Tab Three Label',
19	content: '<p>Tab Three Content</p>'
20	}));
	view plain \| print \| ?

Rendering the Editor

Now that we have a place for the Editor to live, we can now render it.


1	var myConfig = {
2	height: '100px',
3	width: '600px',
4	animate: true,
5	dompath: true
6	};
7
8	YAHOO.log('Create the Editor..', 'info', 'example');
9	var myEditor = new YAHOO.widget.Editor('editor', myConfig);
10	myEditor.render();
	view plain \| print \| ?

Full Example Javascript Source


1	(function() {
2	var Dom = YAHOO.util.Dom,
3	Event = YAHOO.util.Event,
4	editorTab = null,
5	myEditor = null;
6
7
8	YAHOO.log('Create the Tabview..', 'info', 'example');
9	var myTabs = new YAHOO.widget.TabView('e_tabs');
10
11	YAHOO.log('Add the first tab..', 'info', 'example');
12	myTabs.addTab( new YAHOO.widget.Tab({
13	label: 'Tab One Label',
14	content: '<p>Tab One Content</p>',
15	active: true
16	}));
17
18	YAHOO.log('Add the editor tab..', 'info', 'example');
19	editorTab = new YAHOO.widget.Tab({
20	label: 'Editor Tab',
21	content: '<textarea id="editor">This is the editor content.. You can edit me!</textarea> '
22	});
23
24	myTabs.addTab(editorTab);
25
26	YAHOO.log('Add the third tab..', 'info', 'example');
27	myTabs.addTab( new YAHOO.widget.Tab({
28	label: 'Tab Three Label',
29	content: '<p>Tab Three Content</p>'
30	}));
31
32	myTabs.on('activeTabChange', function(ev) {
33	YAHOO.log('Active tab Change, check to see if we are showing the editor..', 'info', 'example');
34	if (ev.newValue == editorTab) {
35	var myConfig = {
36	height: '100px',
37	width: '600px',
38	animate: true,
39	dompath: true
40	};
41	if (!myEditor) {
42	YAHOO.log('Create the Editor..', 'info', 'example');
43	myEditor = new YAHOO.widget.Editor('editor', myConfig);
44	myEditor.render();
45	}
46	}
47	});
48	})();
	view plain \| print \| ?

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        editorTab = null,
        myEditor = null;

YAHOO.log('Create the Tabview..', 'info', 'example');
    var myTabs = new YAHOO.widget.TabView('e_tabs');
	
    YAHOO.log('Add the first tab..', 'info', 'example');
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab One Label',
        content: '<p>Tab One Content</p>',
        active: true
    }));
    
    YAHOO.log('Add the editor tab..', 'info', 'example');
    editorTab = new YAHOO.widget.Tab({
        label: 'Editor Tab',
        content: '<textarea id="editor">This is the editor content.. You can edit me!</textarea> '
    });

myTabs.addTab(editorTab);
    
    YAHOO.log('Add the third tab..', 'info', 'example');
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab Three Label',
        content: '<p>Tab Three Content</p>'
    }));
    
    myTabs.on('activeTabChange', function(ev) {
        YAHOO.log('Active tab Change, check to see if we are showing the editor..', 'info', 'example');
         if (ev.newValue == editorTab) {
            var myConfig = {
                height: '100px',
                width: '600px',
                animate: true,
                dompath: true
            };
            if (!myEditor) {
                YAHOO.log('Create the Editor..', 'info', 'example');
                myEditor = new YAHOO.widget.Editor('editor', myConfig);
                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:

Logger Console

INFO 1241ms (+163) 3:44:17 AM:
LogReader  instance0
LogReader initialized

INFO 1078ms (+0) 3:44:17 AM:
example
Add the third tab..

INFO 1078ms (+2) 3:44:17 AM:
example
Add the editor tab..

INFO 1076ms (+2) 3:44:17 AM:
example
Add the first tab..

INFO 1074ms (+1073) 3:44:17 AM:
example
Create the Tabview..

INFO 1ms (+1) 3:44:16 AM:
global
Logger initialized

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

Reload with logging
and debugging disabled.