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();
            }
         }
    });
})();

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:

More Rich Text Editor Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.