1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<div class="intro">
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <p>Use the Editor's NodeChange Event</p>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<div class="example">
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass {{>editor-nodechange-source}}
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h3>Working with EditorBase</h3>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<p>`EditorBase` is not a fully functional Editor, it is simply the base utility that will be used under the hood to create an Editor.</p>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h3>Creating the Editor</h3>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<p>In this step we are going to do the initial render of the Editor, set its content, and focus it when it's ready.</p>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav GlassYUI().use('editor', function(Y) {
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass //Create the Base Editor
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass var editor = new Y.EditorBase({
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass 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>',
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass extracss: '.foo { font-weight: normal; color: black; background-color: yellow; }'
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass //Rendering the Editor.
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h3>The Node Change Event</h3>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<p>The `nodeChange` event is a special event that Editor emmits so that you can react to certain important moments that occured.</p>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<p>The most common use for the `nodeChange` event is to update the state of a Toolbar.</p>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h4>nodeChange event properties</h4>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<p>This list contains the properties that are added to the Event object when the `nodeChange` event is fired.</p>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <th>Event Property</th>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <th>Description</th>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td nowrap="nowrap">`changedEvent`</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td>The event that caused the nodeChange</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td nowrap="nowrap">`changedNode`</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td>The node that was interacted with</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td nowrap="nowrap">`changedType`</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td>The type of change: mousedown, mouseup, right, left, backspace, tab, enter, etc.</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td nowrap="nowrap">`commands`</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td>The list of execCommands that belongs to this change and the dompath that's associated with the changedNode</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td nowrap="nowrap">`classNames`</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td>An array of classNames that is applied to the changedNode and all of its parents</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td nowrap="nowrap">`dompath`</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td>A sorted array of node instances that make up the DOM path from the changedNode to body.</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td nowrap="nowrap">`backgroundColor`</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td>The cascaded backgroundColor of the changedNode</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td nowrap="nowrap">`fontColor`</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td>The cascaded fontColor of the changedNode</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td nowrap="nowrap">`fontFamily`</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td>The cascaded fontFamily of the changedNode</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td nowrap="nowrap">`fontSize`</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass <td>The cascaded fontSize of the changedNode</td>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass //Attaching a nodeChange event
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass editor.on('nodeChange', function(e) {
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass //Here e contains the values above..
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h3>Full Example Source</h3>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h4>HTML</h4>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass{{>editor-nodechange-source-html}}
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass{{>editor-nodechange-source-css}}
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass<h4>Javascript</h4>
3f2ac16886fbbccf85547608b11143a8795d8db4Dav Glass{{>editor-nodechange-source-js}}