Use the Editor's NodeChange Event

{{>editor-nodechange-source}}

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: '

This is a test

This is a test

', 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

``` {{>editor-nodechange-source-html}} ```

CSS

``` {{>editor-nodechange-source-css}} ```

Javascript

``` {{>editor-nodechange-source-js}} ```