Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Rich Text Editor (beta): Editor inside a Tabview Control

# Rich Text Editor (beta): Editor inside a Tabview Control

This example demonstrates how to render an Editor inside of a TabView Control.

View example in new window.

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

### YUI Logger Output:

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

Reload with logging
and debugging enabled.

### Rich Text Editor (beta) Examples:

- Flickr Image Search
- Calendar Plugin
- Icon Insertion
- Plain Text Switcher
- Editor Data Post with Connection Manager
- Skinning the Editor
- Default Toolbar Config
- Code Editor
- Editor inside a Tabview Control
- One Editor, Multiple Edit Areas
- Editor with Custom Image Browser
- Simple Editor — Basic Buttons
- Simple Editor — Advanced Buttons
- Editor — Basic Buttons
- Editor Auto Adjusting Height
- Custom resizing for the Rich Text Editor (included with examples for Resize Utility (beta))
- Simple Application (included with examples for Layout Manager (beta))
- Complex Application (included with examples for Layout Manager (beta))

### More Rich Text Editor (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings