#

Jump to Table of Contents

# YUI Global Object

This example demonstrates using YUI 2 with YUI 3 and a Gallery module.

This <strong>is a test</strong>, this is only a test.

### Setting it up

This example uses the following modules: `node, gallery-storage-lite, yui2-editor`

    YUI().use('node', 'gallery-storage-lite', 'yui2-editor', function(Y) {

    });

### Aliasing YUI 2

For ease of use or for easier porting of code, this example aliases the `Y.YUI2` property on the instance to a local variable called `YAHOO`. This will allow most YUI 2 code to run unmodified.

    YUI().use('node', 'gallery-storage-lite', 'yui2-editor', function(Y) {
        //Aliasing Y.YUI2 to YAHOO
        var YAHOO = Y.YUI2;

    });

### Full Source

The rest of the example is just to show you that you can mix and match YUI 2 and YUI 3 code.

    YUI().use('node', 'event-delegate', 'yui2-editor', 'gallery-storage-lite', function(Y, result) {

        var YAHOO = Y.YUI2, res = Y.one('#wrapper .status'),
        defaultText = Y.one('#editor').get('value'),
        write = function(str) {
            var d = new Date();
            str += ' :: ' + d.toTimeString();
            res.setHTML(str);
        },
        save = function() {
            Y.StorageLite.on('storage-lite:ready', function () {
                var html = editor.saveHTML();
                Y.StorageLite.setItem('editorContent', html);
                write('Editor content saved..');
            });
        };

        var editor = new YAHOO.widget.Editor('editor', {
            dompath: true,
            width: '550px',
            height: '250px',
            toolbar: {
                titlebar: 'Saving Editor',
                buttons: [
                    { group: 'saveclear', label: 'Save & Clear',
                        buttons: [
                            { type: 'push', label: 'Save', value: 'save' },
                            { type: 'push', label: 'Clear', value: 'clear' },
                            { type: 'push', label: 'Reset', value: 'reset' }
                        ]
                    },
                    { group: 'textstyle', label: 'Font Style',
                        buttons: [
                            { type: 'push', label: 'Bold', value: 'bold' },
                            { type: 'push', label: 'Italic', value: 'italic' },
                            { type: 'push', label: 'Underline', value: 'underline' },
                            { type: 'separator' },
                            { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                                menu: [
                                    { text: 'Arial', checked: true },
                                    { text: 'Arial Black' },
                                    { text: 'Comic Sans MS' },
                                    { text: 'Courier New' },
                                    { text: 'Lucida Console' },
                                    { text: 'Tahoma' },
                                    { text: 'Times New Roman' },
                                    { text: 'Trebuchet MS' },
                                    { text: 'Verdana' }
                                ]
                            },
                            { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
                            { type: 'separator' },
                            { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
                            { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
                        ]
                    }
                ]
            }
        });
        editor.on('toolbarLoaded', function() {
            editor.toolbar.on('clearClick', function() {
                editor.setEditorHTML('<br>');
                write('Editor content cleared..');
            });
            editor.toolbar.on('resetClick', function() {
                if (confirm('Are you sure you want to reset the Editor?')) {
                    editor.setEditorHTML(defaultText);
                    Y.StorageLite.setItem('editorContent', null);
                    write('Editor content reset to default..');
                }
            });
            editor.toolbar.on('saveClick', save);
        });
        Y.later(5000, editor, function() {
            if (editor.editorDirty) {
                editor.editorDirty = null;
                save();
            }
        }, {}, true);

        Y.on('domready', function() {

            Y.StorageLite.on('storage-lite:ready', function () {
                var editorValue;
                try {
                    editorValue = Y.StorageLite.getItem('editorContent');
                } catch(e) {}
                if (!editorValue) {
                    Y.one('#editor').set('value', editorValue);
                    write('Loaded editor content from Local Storage');
                } else {
                    write('Loaded default editor content');
                }
                editor.render();
            });

        });

    });