YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Rich Text Editor

# Rich Text Editor: Examples

The Rich Text Editor is a UI control that replaces a standard HTML textarea. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor's Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.

- Flickr Image Search: This example adds a button that opens a custom panel containing an AutoComplete Control that can be used to retrieve photos from Flickr.
- Calendar Plugin: This example adds a button to the Rich Text Editor's Toolbar that displays a Calendar control for choosing dates. It also demonstrates how to manage the state of a custom button.
- Icon Insertion: This example adds a button that opens a custom panel to insert custom icons.
- Plain Text Switcher: This example demonstrates how to toggle from a plain text field to the Rich Text Editor with a simple button click.
- Editor Data Post with Connection Manager: This example posts data to the server with Connection Manager and returns filtered data.
- Skinning the Editor: Editor skinning is done via CSS. The Editor comes with a default skin, but you can extend or override this as needed.
- Default Toolbar Config: Here you will find the default config for the Editor's toolbar.
- Code Editor: This example demonstrates how to build a Source Editor.
- Editor inside a Tabview Control: Placing an Editor inside of a Tabview Control.
- One Editor, Multiple Edit Areas: Have one Editor control several editable areas on a single page.
- Editor with Custom Image Browser: Use a custom image browser for image insertion into the editor.
- Simple Editor — Basic Buttons: Using the SimpleEditor Control with Basic Buttons.
- Simple Editor — Advanced Buttons: Using the SimpleEditor Control with Advanced Buttons.
- Editor — Basic Buttons: Using the Editor Control with Basic Buttons.
- Editor Auto Adjusting Height: Using the autoHeight config to make the Editor change it's height based on the content.
- Editor in a Dialog Control: It's easy to use the Rich Text Editor to enhance a textarea within a Dialog Control; this example shows you how.

## Other YUI Examples That Make Use of the Rich Text Editor

- Custom resizing for the Rich Text Editor (included with examples for the Resize Utility)
- Simple Application (included with examples for the Layout Manager)
- Complex Application (included with examples for the Layout Manager)

### Rich Text Editor:

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

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