3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<div class="intro">

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<p>Use the Editor's Events</p>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass</div>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<div class="example">

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass {{>editor-events-source}}

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass</div>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h3>Working with EditorBase</h3>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<p>`EditorBase` is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor.</p>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h3>Creating the Editor</h3>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<p>In this step we are going to do the initial render of the Editor, set its content and focus it when it's ready.</p>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

3f2ac16886fbbccf85547608b11143a8795d8db4Dav GlassYUI().use('editor', function(Y) {

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass //Create the Base Editor

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass var editor = new Y.EditorBase({

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass 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>',

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass });

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass //Rendering the Editor

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass editor.render('#editor');

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass});

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h3>Full Example Source</h3>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h4>HTML</h4>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass{{>editor-events-source-html}}

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h4>CSS</h4>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass{{>editor-events-source-css}}

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h4>Javascript</h4>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass{{>editor-events-source-js}}

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```