Jump to Table of Contents

Example: NodeChange Event

Use the Editor's NodeChange Event

Interact with the Editor instance below (click, type) and watch the console.

Use some special keys too. Enter, tab, arrows... Notice the event names.

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

});

The Node Change Event

The nodeChange event is a special event that Editor emmits so that you can react to certain important moments that occured.

The most common use for the nodeChange event is to update the state of a Toolbar.

nodeChange event properties

This list contains the properties that are added to the Event object when the nodeChange event is fired.

Event Property Description
changedEvent The event that caused the nodeChange
changedNode The node that was interacted with
changedType The type of change: mousedown, mouseup, right, left, backspace, tab, enter, etc.
commands The list of execCommands that belongs to this change and the dompath that's associated with the changedNode
classNames An array of classNames that is applied to the changedNode and all of its parents
dompath A sorted array of node instances that make up the DOM path from the changedNode to body.
backgroundColor The cascaded backgroundColor of the changedNode
fontColor The cascaded fontColor of the changedNode
fontFamily The cascaded fontFamily of the changedNode
fontSize The cascaded fontSize of the changedNode 
//Attaching a nodeChange event
editor.on('nodeChange', function(e) {
    //Here e contains the values above..
});

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>
        <p>Use some special keys too. Enter, tab, arrows... Notice the event names.</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 node = e.changedNode, tag;
        
        if (node) {
            tag = node.get('tagName').toLowerCase();
            Y.log('nodeChange Event: ' + e.changedType + ' on (' + 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; }'
    });
    
    editor.on('nodeChange', logFn);

    //Rendering the Editor.
    editor.render('#editor');
});

Examples