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