YUI: Editor: Multilple Edit Areas, One Editor

This is an Advanced example based on the One Editor, Multiple Edit Areas example.

The Example

The Javascript

YAHOO.log('Override the prototype of the toolbar to use a different string for the collapse button', 'info', 'example');
    YAHOO.widget.Toolbar.prototype.STR_COLLAPSE = 'Click to close the editor.';
    YAHOO.log('Create the Editor..', 'info', 'example');
    myEditor = new YAHOO.widget.Editor('editor', myConfig);
    myEditor.on('toolbarLoaded', function() {
        YAHOO.log('Toolbar is loaded, add a listener for the toolbarCollapsed event', 'info', 'example');
        this.toolbar.on('toolbarCollapsed', function() {
            YAHOO.log('Toolbar was collapsed, reposition and save the editors data', 'info', 'example');
            Dom.setXY(this.get('element_cont').get('element'), [-99999, -99999]);
            Dom.removeClass(this.toolbar.get('cont').parentNode, 'yui-toolbar-container-collapsed');
            myEditor.saveHTML();
            editing.innerHTML = myEditor.get('element').value;
            editing = null;
        }, myEditor, true);
    }, myEditor, true);
    myEditor.render();

Event.on('editable_cont', 'dblclick', function(ev) {
        var tar = Event.getTarget(ev);
        if (Dom.hasClass(tar, 'editable')) {
            YAHOO.log('An element with the classname of editable was double clicked on.', 'info', 'example');
            if (editing !== null) {
                YAHOO.log('There is an editor open, save its data before continuing..', 'info', 'example');
                myEditor.saveHTML();
                editing.innerHTML = myEditor.get('element').value;
            }
            YAHOO.log('Get the XY position of the Element that was clicked', 'info', 'example');
            var xy = Dom.getXY(tar);
            YAHOO.log('Set the Editors HTML with the elements innerHTML', 'info', 'example');
            myEditor.setEditorHTML(tar.innerHTML);
            var body = myEditor._getDoc.call(myEditor).body;
            Dom.setStyle(body, 'background-color', Dom.getStyle(tar, 'background-color'));
            Dom.setStyle(body, 'color', Dom.getStyle(tar, 'color'));
            YAHOO.log('Reposition the editor with the elements xy', 'info', 'example');
            Dom.setXY(myEditor.get('element_cont').get('element'), xy);
            editing = tar;
        }
    });

})();

YUI: Editor: Multilple Edit Areas, One Editor - Advanced

The Example

The Javascript