Rich Text Editor: Using the Editor's Events
Use the Editor's Events
Interact with the Editor instance below (click, type) and watch the console.
Working with EditorBase
EditorBase
is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor.
Creating the Editor
In this step we are going to do the initial render of the Editor, set its content and focus it when it's ready.
YUI().use('editor', function(Y) { //Create the Base Editor var editor = new Y.EditorBase({ content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>', extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }' }); //Rendering the Editor editor.render('#editor'); });
YUI().use('editor', function(Y) { //Create the Base Editor var editor = new Y.EditorBase({ content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>', extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }' }); //Rendering the Editor editor.render('#editor'); });
Full Example Source
YUI().use('editor', 'console', function(Y) { (new Y.Console().render( "#console" )); Y.log('Interact with the Editor..'); var logFn = function(e) { Y.log('Event: ' + e.type); }; //Create the Base Editor var editor = new Y.EditorBase({ content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>', extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }' }); //Attaching a simple event to all DOM events Y.each(Y.Frame.DOM_EVENTS, function(v, k) { editor.on('dom:' + k, logFn); }); //Rendering the Editor editor.render('#editor'); });
YUI().use('editor', 'console', function(Y) { (new Y.Console().render( "#console" )); Y.log('Interact with the Editor..'); var logFn = function(e) { Y.log('Event: ' + e.type); }; //Create the Base Editor var editor = new Y.EditorBase({ content: '<p><b>This is <i class="foo">a test</i></b></p><p><b style="color: red; font-family: Comic Sans MS">This is <span class="foo">a test</span></b></p>', extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }' }); //Attaching a simple event to all DOM events Y.each(Y.Frame.DOM_EVENTS, function(v, k) { editor.on('dom:' + k, logFn); }); //Rendering the Editor editor.render('#editor'); });