Setting up the HTML

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

<style> .yui-content { height: 250px; } .yui-content textarea { visibility: hidden; } </style> <div id="e_tabs"></div>

Setting up the TabView Javascript

Next we need to create the TabView control.

(function() { //Setup some private variables var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var myTabs = new YAHOO.widget.TabView('e_tabs'); })();

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

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

Rendering the Editor

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

var myConfig = { height: '100px', width: '530px', animate: true, dompath: true }; YAHOO.log('Create the Editor..', 'info', 'example'); var myEditor = new YAHOO.widget.Editor('editor', myConfig); myEditor.render();

Handling the switching of tabs

This is the important part of this example. The Rich Text Editor will not behave properly if it is rendered or toggled in a container that has been set to display none.

This behaviour can be fixed by calling the Editor method show. The show method will attempt to fix the Editor when it is in this state.

So, we will add an Event listener to the Tabview's activeTabChange event and call the Editor's show method when we change to the Editor's tab.

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) { YAHOO.log('Editor showing, calling myEditor.show()..', 'info', 'example'); myEditor.show(); } });

Full Example Javascript Source

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, editorTab = 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) { YAHOO.log('Editor showing, calling myEditor.show()..', 'info', 'example'); myEditor.show(); } }); var myConfig = { height: '100px', width: '530px', animate: true, dompath: true }; YAHOO.log('Create the Editor..', 'info', 'example'); var myEditor = new YAHOO.widget.Editor('editor', myConfig); myEditor.render(); })();