YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Rich Text Editor: Code Editor

# Rich Text Editor: Code Editor

This example demonstrates how to create a Code Editor using the Rich Text Editor. As you begin typing, you're in a standard Editor space. But if you click on the "code icon" &mdash the rightmost icon on the second row — you can begin using HTML markup. When you toggle the code editing mode back off, you'll see rich text formatted with your HTML.

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.

<button type="button" id="toggleEditor">Toggle Editor</button> <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 Editor config var myConfig = { height: '300px', width: '600px', animate: true, dompath: true, focusAtStart: true }; //Now let's load the Editor.. var myEditor = new YAHOO.widget.Editor('editor', myConfig); myEditor.render(); })();

## Getting the textarea in new place

By default the RTE places the `textarea` inside the Editor's parent, but for this example we need it as a sibling of the iframe.

So, we will subscribe to the Editor's `afterRender` event and move it around.

var myEditor = new YAHOO.widget.Editor('editor', myConfig); myEditor.on('toolbarLoaded', function() { this.on('afterRender', function() { var wrapper = this.get('editor_wrapper'); wrapper.appendChild(this.get('element')); this.setStyle('width', '100%'); this.setStyle('height', '100%'); this.setStyle('visibility', ''); this.setStyle('top', ''); this.setStyle('left', ''); this.setStyle('position', ''); this.addClass('editor-hidden'); }, this, true); }, myEditor, true); myEditor.render();

## Add our new button

Now we need to add our new Code Editor button. We do this by setting up a new `ToolbarButton` config and adding it to the toolbar with the Toolbar's `addButtonToGroup` method.

.yui-skin-sam .yui-toolbar-container .yui-toolbar-editcode span.yui-toolbar-icon { background-image: url( assets/html_editor.gif ); background-position: 0 1px; left: 5px; } .yui-skin-sam .yui-toolbar-container .yui-button-editcode-selected span.yui-toolbar-icon { background-image: url( assets/html_editor.gif ); background-position: 0 1px; left: 5px; } myEditor.on('toolbarLoaded', function() { var codeConfig = { type: 'push', label: 'Edit HTML Code', value: 'editcode' }; YAHOO.log('Create the (editcode) Button', 'info', 'example'); this.toolbar.addButtonToGroup(codeConfig, 'insertitem'); this.on('afterRender', function() { //snipped }, this, true); }, myEditor, true);

## Now we handle what happens when we click that button

Starting by listening for the `editorcodeClick` event, we judge what state the code editor is in by the `state` var and act as needed.

If the state is `off` (the default) the we will set it to `on`, then fire the `cleanHTML` method (to tidy up the HTML in the Editor). Now we add the class `editor-hidden` to the `iframe` and remove it from the `textarea`. This will hide the Editor's iframe and show the textarea.

Then we will disable the Editor's toolbar with a call to `this.toolbar.set('disabled', true)`. Now we will set the `codeeditor` button back to enabled by calling `this.toolbar.getButtonByValue('editcode').set('disabled', false)`, then select it with the `selectButton` method.

Now, the next time the button is clicked we will reverse the process.

.editor-hidden { visibility: hidden; top: -9999px; left: -9999px; position: absolute; } textarea { border: 0; margin: 0; padding: 0; } //Somewhere above the Editor code var state = 'off'; YAHOO.log('Set state to off..', 'info', 'example'); //Inside the toolbarLoaded event this.toolbar.on('editcodeClick', function() { var ta = this.get('element'), iframe = this.get('iframe').get('element'); if (state == 'on') { state = 'off'; this.toolbar.set('disabled', false); YAHOO.log('Show the Editor', 'info', 'example'); YAHOO.log('Inject the HTML from the textarea into the editor', 'info', 'example'); this.setEditorHTML(ta.value); if (!this.browser.ie) { this._setDesignMode('on'); } Dom.removeClass(iframe, 'editor-hidden'); Dom.addClass(ta, 'editor-hidden'); this.show(); this._focusWindow(); } else { state = 'on'; YAHOO.log('Show the Code Editor', 'info', 'example'); this.cleanHTML(); YAHOO.log('Save the Editors HTML', 'info', 'example'); Dom.addClass(iframe, 'editor-hidden'); Dom.removeClass(ta, 'editor-hidden'); this.toolbar.set('disabled', true); this.toolbar.getButtonByValue('editcode').set('disabled', false); this.toolbar.selectButton('editcode'); this.dompath.innerHTML = 'Editing HTML Code'; this.hide(); } return false; }, this, true);

## Putting the HTML into the textarea

Using the new `cleanHTML` event, we will set the value of the `textarea` each time we call `this.saveHTML()`

this.toolbar.on('editcodeClick', function() { this.on('cleanHTML', function(ev) { YAHOO.log('cleanHTML callback fired..', 'info', 'example'); this.get('element').value = ev.html; }, this, true); }, myEditor, true);

## Full Example Javascript Source

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var myConfig = { height: '300px', width: '600px', animate: true, dompath: true, focusAtStart: true }; var state = 'off'; YAHOO.log('Set state to off..', 'info', 'example'); YAHOO.log('Create the Editor..', 'info', 'example'); var myEditor = new YAHOO.widget.Editor('editor', myConfig); myEditor.on('toolbarLoaded', function() { var codeConfig = { type: 'push', label: 'Edit HTML Code', value: 'editcode' }; YAHOO.log('Create the (editcode) Button', 'info', 'example'); this.toolbar.addButtonToGroup(codeConfig, 'insertitem'); this.toolbar.on('editcodeClick', function() { var ta = this.get('element'), iframe = this.get('iframe').get('element'); if (state == 'on') { state = 'off'; this.toolbar.set('disabled', false); YAHOO.log('Show the Editor', 'info', 'example'); YAHOO.log('Inject the HTML from the textarea into the editor', 'info', 'example'); this.setEditorHTML(ta.value); if (!this.browser.ie) { this._setDesignMode('on'); } Dom.removeClass(iframe, 'editor-hidden'); Dom.addClass(ta, 'editor-hidden'); this.show(); this._focusWindow(); } else { state = 'on'; YAHOO.log('Show the Code Editor', 'info', 'example'); this.cleanHTML(); YAHOO.log('Save the Editors HTML', 'info', 'example'); Dom.addClass(iframe, 'editor-hidden'); Dom.removeClass(ta, 'editor-hidden'); this.toolbar.set('disabled', true); this.toolbar.getButtonByValue('editcode').set('disabled', false); this.toolbar.selectButton('editcode'); this.dompath.innerHTML = 'Editing HTML Code'; this.hide(); } return false; }, this, true); this.on('cleanHTML', function(ev) { YAHOO.log('cleanHTML callback fired..', 'info', 'example'); this.get('element').value = ev.html; }, this, true); this.on('afterRender', function() { var wrapper = this.get('editor_wrapper'); wrapper.appendChild(this.get('element')); this.setStyle('width', '100%'); this.setStyle('height', '100%'); this.setStyle('visibility', ''); this.setStyle('top', ''); this.setStyle('left', ''); this.setStyle('position', ''); this.addClass('editor-hidden'); }, this, true); }, myEditor, true); myEditor.render(); })();

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### 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
- Editor in a Dialog Control
- 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 © 2010 Yahoo! Inc. All rights reserved.

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