YUI Library Home

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.

Setting up the Editors HTML

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

Setting up the Editors Javascript

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

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.

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.

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.

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()

Full Example Javascript Source

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.

Copyright © 2011 Yahoo! Inc. All rights reserved.

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