<div class="intro">

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

</div>

<div class="example">

{{>editor-instance-source}}

</div>

<h3>Working with EditorBase</h3>

<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>

<p>When the Editor is created, it creates a YUI instance inside itself and attaches that instance to the editable iframe.

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

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

internal YUI instance to get Node instances from the Editor. </p>

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

<h3>Creating the Editor</h3>

<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>

```

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');

});

```

<h3>Full Example Source</h3>

<h4>HTML</h4>

```

{{>editor-instance-source-html}}

```

<h4>CSS</h4>

```

{{>editor-instance-source-css}}

```

<h4>Javascript</h4>

```

{{>editor-instance-source-js}}

```