3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<div class="intro">

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<p>Use the Editor's instance to query the iframe</p>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass</div>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<div class="example">

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass {{>editor-instance-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<p>When the Editor is created, it creates a YUI instance inside itself and attaches that instance to the editable iframe.

3f2ac16886fbbccf85547608b11143a8795d8db4Dav GlassThis means that you now have the full power of YUI 3 inside the Editor iframe. You can use Event, Stylesheet, Node and even DD

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glassinside the iframe, without having to load all the JavaScript inside the document. In this example we will show how to use the

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glassinternal YUI instance to get Node instances from the Editor. </p>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<p>Getting access to this instance is simple. Just use the `getInstance` method on the Editor instance.</p>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

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<h3>Full Example Source</h3>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h4>HTML</h4>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

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

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h4>CSS</h4>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

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

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h4>Javascript</h4>

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```

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

3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass```