Example: Editor Events

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