YUI Library Examples: Rich Text Editor (beta): Code Editor

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.

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

Full Example Javascript Source

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;
    
    var myConfig = {
        height: '300px',
        width: '530px',
        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();

})();

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.