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)