#

Jump to Table of Contents

# Example: Editor 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');

    });

### Full Example Source

#### HTML

    <div id="demo_holder" class="yui3-skin-sam">
        <div id="editor_cont">
            <p>Interact with the Editor instance below (click, type) and watch the console.</p>
            <div id="editor"></div>
        </div>
        <div id="console"></div>
    </div>

#### CSS

    #demo_holder {
        position: relative;
    }
    #editor_cont {
        width: 300px;
        border: 1px solid #999;
        margin: 2em;
        background-color: #f2f2f2;
    }
    #editor_cont p {
        margin: .5em;
    }
    #editor {
        height: 350px;
        background-color: #fff;
    }
    #example-canvas .yui3-console .yui3-console-title {
        border: 0 none;
        color: #000;
        font-size: 13px;
        font-weight: bold;
        margin: 0;
        text-transform: none;
    }
    #example-canvas .yui3-console .yui3-console-entry-meta {
        margin: 0;
    }

#### Javascript

    YUI().use('editor', 'console', function(Y) {

        (new Y.Console().render( "#console" ));

        Y.log('Interact with the Editor.');

        var logFn = function(e) {
            var tag = e.frameTarget.get('tagName').toLowerCase();
            Y.log('Event: ' + e.type + ' on element (' + tag + ')');
        };

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