<div class="intro">
<p>Use the InlineEditor's Events</p>
</div>

<div class="example">
    {{>editor-inline-events-source}}
</div>

<h3>Working with InlineEditor</h3>
<p>`InlineEditor` is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor.</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-inline', function(Y) {

    //Create the Base Editor
    var editor = new Y.InlineEditor({
        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-inline-events-source-html}}
```

<h4>CSS</h4>
```
{{>editor-inline-events-source-css}}
```


<h4>Javascript</h4>
```
{{>editor-inline-events-source-js}}
```
