YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Rich Text Editor: Simple Editor — Advanced Buttons

# Rich Text Editor: Simple Editor — Advanced Buttons

This example demonstrates how to use the SimpleEditor Control with Advanced Buttons.

View example in new window.

This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>

## Setting up the Editors HTML

Setting up the Editor's HTML is done by creating a `textarea` control on the page.

<form method="post" action="#" id="form1"> <textarea id="editor" name="editor" rows="20" cols="75"> This is some more test text.<br>This is some more test text.<br>This is some more test text.<br> This is some more test text.<br>This is some more test text.<br>This is some more test text. </textarea> </form>

## Setting up the Editors Javascript

Once the `textarea` is on the page, then initialize the Editor like this:

(function() { //Setup some private variables var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; //The SimpleEditor config var myConfig = { height: '300px', width: '600px', dompath: true, focusAtStart: true }; //Now let's load the SimpleEditor.. var myEditor = new YAHOO.widget.SimpleEditor('editor', myConfig); myEditor.render(); })();

## Changing the buttons

To use the advanced buttons we need to make sure that we load the `Menu` and `Button` controls first.

Now we need to tell the SimpleEditor to use the advanced buttons by setting the `_defaultToolbar.buttonType` variable to `advanced`

var myEditor = new YAHOO.widget.SimpleEditor('editor', myConfig); myEditor._defaultToolbar.buttonType = 'advanced'; 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 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)
- Simple Application (included with examples for Layout Manager)
- Complex Application (included with examples for Layout Manager)

### More Rich Text Editor 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