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