The YUI Global Object: YUI 2 in 3 & Gallery Modules
This example demonstrates using YUI 2 with YUI 3 and a Gallery module.
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) { });
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; });
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', 'gallery-storage-lite', 'yui2-editor', function(Y) { //Aliasing Y.YUI2 to YAHOO 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.set('innerHTML', 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.StorageLite.on('storage-lite:ready', function () { var editorValue = Y.StorageLite.getItem('editorContent'); if (editorValue !== null) { Y.one('#editor').set('value', editorValue); write('Loaded editor content from Local Storage'); } else { write('Loaded default editor content'); } editor.render(); }); });
YUI().use('node', 'gallery-storage-lite', 'yui2-editor', function(Y) { //Aliasing Y.YUI2 to YAHOO 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.set('innerHTML', 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.StorageLite.on('storage-lite:ready', function () { var editorValue = Y.StorageLite.getItem('editorContent'); if (editorValue !== null) { Y.one('#editor').set('value', editorValue); write('Loaded editor content from Local Storage'); } else { write('Loaded default editor content'); } editor.render(); }); });