|
602
|
1 |
YUI.add('exec-command', function (Y, NAME) { |
|
|
2 |
|
|
|
3 |
|
|
|
4 |
/** |
|
|
5 |
* Plugin for the frame module to handle execCommands for Editor |
|
|
6 |
* @class Plugin.ExecCommand |
|
|
7 |
* @extends Base |
|
|
8 |
* @constructor |
|
|
9 |
* @module editor |
|
|
10 |
* @submodule exec-command |
|
|
11 |
*/ |
|
|
12 |
var ExecCommand = function() { |
|
|
13 |
ExecCommand.superclass.constructor.apply(this, arguments); |
|
|
14 |
}, |
|
|
15 |
/** |
|
|
16 |
* This method is meant to normalize IE's in ability to exec the proper command on elements with CSS styling. |
|
|
17 |
* @method fixIETags |
|
|
18 |
* @protected |
|
|
19 |
* @param {String} cmd The command to execute |
|
|
20 |
* @param {String} tag The tag to create |
|
|
21 |
* @param {String} rule The rule that we are looking for. |
|
|
22 |
*/ |
|
|
23 |
fixIETags = function(cmd, tag, rule) { |
|
|
24 |
var inst = this.getInstance(), |
|
|
25 |
doc = inst.config.doc, |
|
|
26 |
sel = doc.selection.createRange(), |
|
|
27 |
o = doc.queryCommandValue(cmd), |
|
|
28 |
html, reg, m, p, d, s, c; |
|
|
29 |
|
|
|
30 |
if (o) { |
|
|
31 |
html = sel.htmlText; |
|
|
32 |
reg = new RegExp(rule, 'g'); |
|
|
33 |
m = html.match(reg); |
|
|
34 |
|
|
|
35 |
if (m) { |
|
|
36 |
html = html.replace(rule + ';', '').replace(rule, ''); |
|
|
37 |
|
|
|
38 |
sel.pasteHTML('<var id="yui-ie-bs">'); |
|
|
39 |
|
|
|
40 |
p = doc.getElementById('yui-ie-bs'); |
|
|
41 |
d = doc.createElement('div'); |
|
|
42 |
s = doc.createElement(tag); |
|
|
43 |
|
|
|
44 |
d.innerHTML = html; |
|
|
45 |
if (p.parentNode !== inst.config.doc.body) { |
|
|
46 |
p = p.parentNode; |
|
|
47 |
} |
|
|
48 |
|
|
|
49 |
c = d.childNodes; |
|
|
50 |
|
|
|
51 |
p.parentNode.replaceChild(s, p); |
|
|
52 |
|
|
|
53 |
Y.each(c, function(f) { |
|
|
54 |
s.appendChild(f); |
|
|
55 |
}); |
|
|
56 |
sel.collapse(); |
|
|
57 |
if (sel.moveToElementText) { |
|
|
58 |
sel.moveToElementText(s); |
|
|
59 |
} |
|
|
60 |
sel.select(); |
|
|
61 |
} |
|
|
62 |
} |
|
|
63 |
this._command(cmd); |
|
|
64 |
}; |
|
|
65 |
|
|
|
66 |
Y.extend(ExecCommand, Y.Base, { |
|
|
67 |
/** |
|
|
68 |
* An internal reference to the keyCode of the last key that was pressed. |
|
|
69 |
* @private |
|
|
70 |
* @property _lastKey |
|
|
71 |
*/ |
|
|
72 |
_lastKey: null, |
|
|
73 |
/** |
|
|
74 |
* An internal reference to the instance of the frame plugged into. |
|
|
75 |
* @private |
|
|
76 |
* @property _inst |
|
|
77 |
*/ |
|
|
78 |
_inst: null, |
|
|
79 |
/** |
|
|
80 |
* Execute a command on the frame's document. |
|
|
81 |
* @method command |
|
|
82 |
* @param {String} action The action to perform (bold, italic, fontname) |
|
|
83 |
* @param {String} value The optional value (helvetica) |
|
|
84 |
* @return {Node/NodeList} Should return the Node/Nodelist affected |
|
|
85 |
*/ |
|
|
86 |
command: function(action, value) { |
|
|
87 |
var fn = ExecCommand.COMMANDS[action]; |
|
|
88 |
|
|
|
89 |
if (fn) { |
|
|
90 |
return fn.call(this, action, value); |
|
|
91 |
} else { |
|
|
92 |
return this._command(action, value); |
|
|
93 |
} |
|
|
94 |
}, |
|
|
95 |
/** |
|
|
96 |
* The private version of execCommand that doesn't filter for overrides. |
|
|
97 |
* @private |
|
|
98 |
* @method _command |
|
|
99 |
* @param {String} action The action to perform (bold, italic, fontname) |
|
|
100 |
* @param {String} value The optional value (helvetica) |
|
|
101 |
*/ |
|
|
102 |
_command: function(action, value) { |
|
|
103 |
var inst = this.getInstance(); |
|
|
104 |
try { |
|
|
105 |
try { |
|
|
106 |
inst.config.doc.execCommand('styleWithCSS', null, 1); |
|
|
107 |
} catch (e1) { |
|
|
108 |
try { |
|
|
109 |
inst.config.doc.execCommand('useCSS', null, 0); |
|
|
110 |
} catch (e2) { |
|
|
111 |
} |
|
|
112 |
} |
|
|
113 |
inst.config.doc.execCommand(action, null, value); |
|
|
114 |
} catch (e) { |
|
|
115 |
} |
|
|
116 |
}, |
|
|
117 |
/** |
|
|
118 |
* Get's the instance of YUI bound to the parent frame |
|
|
119 |
* @method getInstance |
|
|
120 |
* @return {YUI} The YUI instance bound to the parent frame |
|
|
121 |
*/ |
|
|
122 |
getInstance: function() { |
|
|
123 |
if (!this._inst) { |
|
|
124 |
this._inst = this.get('host').getInstance(); |
|
|
125 |
} |
|
|
126 |
return this._inst; |
|
|
127 |
}, |
|
|
128 |
initializer: function() { |
|
|
129 |
Y.mix(this.get('host'), { |
|
|
130 |
execCommand: function(action, value) { |
|
|
131 |
return this.exec.command(action, value); |
|
|
132 |
}, |
|
|
133 |
_execCommand: function(action, value) { |
|
|
134 |
return this.exec._command(action, value); |
|
|
135 |
} |
|
|
136 |
}); |
|
|
137 |
|
|
|
138 |
this.get('host').on('dom:keypress', Y.bind(function(e) { |
|
|
139 |
this._lastKey = e.keyCode; |
|
|
140 |
}, this)); |
|
|
141 |
}, |
|
|
142 |
_wrapContent: function(str, override) { |
|
|
143 |
var useP = (this.getInstance().host.editorPara && !override ? true : false); |
|
|
144 |
|
|
|
145 |
if (useP) { |
|
|
146 |
str = '<p>' + str + '</p>'; |
|
|
147 |
} else { |
|
|
148 |
str = str + '<br>'; |
|
|
149 |
} |
|
|
150 |
return str; |
|
|
151 |
} |
|
|
152 |
}, { |
|
|
153 |
/** |
|
|
154 |
* execCommand |
|
|
155 |
* @property NAME |
|
|
156 |
* @static |
|
|
157 |
*/ |
|
|
158 |
NAME: 'execCommand', |
|
|
159 |
/** |
|
|
160 |
* exec |
|
|
161 |
* @property NS |
|
|
162 |
* @static |
|
|
163 |
*/ |
|
|
164 |
NS: 'exec', |
|
|
165 |
ATTRS: { |
|
|
166 |
host: { |
|
|
167 |
value: false |
|
|
168 |
} |
|
|
169 |
}, |
|
|
170 |
/** |
|
|
171 |
* Static object literal of execCommand overrides |
|
|
172 |
* @class Plugin.ExecCommand.COMMANDS |
|
|
173 |
* @static |
|
|
174 |
*/ |
|
|
175 |
COMMANDS: { |
|
|
176 |
/** |
|
|
177 |
* Wraps the content with a new element of type (tag) |
|
|
178 |
* @method wrap |
|
|
179 |
* @static |
|
|
180 |
* @param {String} cmd The command executed: wrap |
|
|
181 |
* @param {String} tag The tag to wrap the selection with |
|
|
182 |
* @return {NodeList} NodeList of the items touched by this command. |
|
|
183 |
*/ |
|
|
184 |
wrap: function(cmd, tag) { |
|
|
185 |
var inst = this.getInstance(); |
|
|
186 |
return (new inst.EditorSelection()).wrapContent(tag); |
|
|
187 |
}, |
|
|
188 |
/** |
|
|
189 |
* Inserts the provided HTML at the cursor, should be a single element. |
|
|
190 |
* @method inserthtml |
|
|
191 |
* @static |
|
|
192 |
* @param {String} cmd The command executed: inserthtml |
|
|
193 |
* @param {String} html The html to insert |
|
|
194 |
* @return {Node} Node instance of the item touched by this command. |
|
|
195 |
*/ |
|
|
196 |
inserthtml: function(cmd, html) { |
|
|
197 |
var inst = this.getInstance(); |
|
|
198 |
if (inst.EditorSelection.hasCursor() || Y.UA.ie) { |
|
|
199 |
return (new inst.EditorSelection()).insertContent(html); |
|
|
200 |
} else { |
|
|
201 |
this._command('inserthtml', html); |
|
|
202 |
} |
|
|
203 |
}, |
|
|
204 |
/** |
|
|
205 |
* Inserts the provided HTML at the cursor, and focuses the cursor afterwards. |
|
|
206 |
* @method insertandfocus |
|
|
207 |
* @static |
|
|
208 |
* @param {String} cmd The command executed: insertandfocus |
|
|
209 |
* @param {String} html The html to insert |
|
|
210 |
* @return {Node} Node instance of the item touched by this command. |
|
|
211 |
*/ |
|
|
212 |
insertandfocus: function(cmd, html) { |
|
|
213 |
var inst = this.getInstance(), out, sel; |
|
|
214 |
if (inst.EditorSelection.hasCursor()) { |
|
|
215 |
html += inst.EditorSelection.CURSOR; |
|
|
216 |
out = this.command('inserthtml', html); |
|
|
217 |
sel = new inst.EditorSelection(); |
|
|
218 |
sel.focusCursor(true, true); |
|
|
219 |
} else { |
|
|
220 |
this.command('inserthtml', html); |
|
|
221 |
} |
|
|
222 |
return out; |
|
|
223 |
}, |
|
|
224 |
/** |
|
|
225 |
* Inserts a BR at the current cursor position |
|
|
226 |
* @method insertbr |
|
|
227 |
* @static |
|
|
228 |
* @param {String} cmd The command executed: insertbr |
|
|
229 |
*/ |
|
|
230 |
insertbr: function() { |
|
|
231 |
var inst = this.getInstance(), |
|
|
232 |
sel = new inst.EditorSelection(), |
|
|
233 |
html = '<var>|</var>', last = null, |
|
|
234 |
root = inst.EditorSelection.ROOT, |
|
|
235 |
q = (Y.UA.webkit) ? 'span.Apple-style-span,var' : 'var', |
|
|
236 |
insert = function(n) { |
|
|
237 |
var c = inst.Node.create('<br>'); |
|
|
238 |
n.insert(c, 'before'); |
|
|
239 |
return c; |
|
|
240 |
}; |
|
|
241 |
|
|
|
242 |
if (sel._selection.pasteHTML) { |
|
|
243 |
sel._selection.pasteHTML(html); |
|
|
244 |
} else { |
|
|
245 |
this._command('inserthtml', html); |
|
|
246 |
} |
|
|
247 |
|
|
|
248 |
|
|
|
249 |
root.all(q).each(function(n) { |
|
|
250 |
var g = true, s; |
|
|
251 |
if (Y.UA.webkit) { |
|
|
252 |
g = false; |
|
|
253 |
if (n.get('innerHTML') === '|') { |
|
|
254 |
g = true; |
|
|
255 |
} |
|
|
256 |
} |
|
|
257 |
if (g) { |
|
|
258 |
last = insert(n); |
|
|
259 |
if ((!last.previous() || !last.previous().test('br')) && Y.UA.gecko) { |
|
|
260 |
s = last.cloneNode(); |
|
|
261 |
last.insert(s, 'after'); |
|
|
262 |
last = s; |
|
|
263 |
} |
|
|
264 |
n.remove(); |
|
|
265 |
} |
|
|
266 |
}); |
|
|
267 |
if (Y.UA.webkit && last) { |
|
|
268 |
insert(last); |
|
|
269 |
sel.selectNode(last); |
|
|
270 |
} |
|
|
271 |
}, |
|
|
272 |
/** |
|
|
273 |
* Inserts an image at the cursor position |
|
|
274 |
* @method insertimage |
|
|
275 |
* @static |
|
|
276 |
* @param {String} cmd The command executed: insertimage |
|
|
277 |
* @param {String} img The url of the image to be inserted |
|
|
278 |
* @return {Node} Node instance of the item touched by this command. |
|
|
279 |
*/ |
|
|
280 |
insertimage: function(cmd, img) { |
|
|
281 |
return this.command('inserthtml', '<img src="' + img + '">'); |
|
|
282 |
}, |
|
|
283 |
/** |
|
|
284 |
* Add a class to all of the elements in the selection |
|
|
285 |
* @method addclass |
|
|
286 |
* @static |
|
|
287 |
* @param {String} cmd The command executed: addclass |
|
|
288 |
* @param {String} cls The className to add |
|
|
289 |
* @return {NodeList} NodeList of the items touched by this command. |
|
|
290 |
*/ |
|
|
291 |
addclass: function(cmd, cls) { |
|
|
292 |
var inst = this.getInstance(); |
|
|
293 |
return (new inst.EditorSelection()).getSelected().addClass(cls); |
|
|
294 |
}, |
|
|
295 |
/** |
|
|
296 |
* Remove a class from all of the elements in the selection |
|
|
297 |
* @method removeclass |
|
|
298 |
* @static |
|
|
299 |
* @param {String} cmd The command executed: removeclass |
|
|
300 |
* @param {String} cls The className to remove |
|
|
301 |
* @return {NodeList} NodeList of the items touched by this command. |
|
|
302 |
*/ |
|
|
303 |
removeclass: function(cmd, cls) { |
|
|
304 |
var inst = this.getInstance(); |
|
|
305 |
return (new inst.EditorSelection()).getSelected().removeClass(cls); |
|
|
306 |
}, |
|
|
307 |
/** |
|
|
308 |
* Adds a forecolor to the current selection, or creates a new element and applies it |
|
|
309 |
* @method forecolor |
|
|
310 |
* @static |
|
|
311 |
* @param {String} cmd The command executed: forecolor |
|
|
312 |
* @param {String} val The color value to apply |
|
|
313 |
* @return {NodeList} NodeList of the items touched by this command. |
|
|
314 |
*/ |
|
|
315 |
forecolor: function(cmd, val) { |
|
|
316 |
var inst = this.getInstance(), |
|
|
317 |
sel = new inst.EditorSelection(), n; |
|
|
318 |
|
|
|
319 |
if (!Y.UA.ie) { |
|
|
320 |
this._command('useCSS', false); |
|
|
321 |
} |
|
|
322 |
if (inst.EditorSelection.hasCursor()) { |
|
|
323 |
if (sel.isCollapsed) { |
|
|
324 |
if (sel.anchorNode && (sel.anchorNode.get('innerHTML') === ' ')) { |
|
|
325 |
sel.anchorNode.setStyle('color', val); |
|
|
326 |
n = sel.anchorNode; |
|
|
327 |
} else { |
|
|
328 |
n = this.command('inserthtml', '<span style="color: ' + val + '">' + inst.EditorSelection.CURSOR + '</span>'); |
|
|
329 |
sel.focusCursor(true, true); |
|
|
330 |
} |
|
|
331 |
return n; |
|
|
332 |
} else { |
|
|
333 |
return this._command(cmd, val); |
|
|
334 |
} |
|
|
335 |
} else { |
|
|
336 |
this._command(cmd, val); |
|
|
337 |
} |
|
|
338 |
}, |
|
|
339 |
/** |
|
|
340 |
* Adds a background color to the current selection, or creates a new element and applies it |
|
|
341 |
* @method backcolor |
|
|
342 |
* @static |
|
|
343 |
* @param {String} cmd The command executed: backcolor |
|
|
344 |
* @param {String} val The color value to apply |
|
|
345 |
* @return {NodeList} NodeList of the items touched by this command. |
|
|
346 |
*/ |
|
|
347 |
backcolor: function(cmd, val) { |
|
|
348 |
var inst = this.getInstance(), |
|
|
349 |
sel = new inst.EditorSelection(), n; |
|
|
350 |
|
|
|
351 |
if (Y.UA.gecko || Y.UA.opera) { |
|
|
352 |
cmd = 'hilitecolor'; |
|
|
353 |
} |
|
|
354 |
if (!Y.UA.ie) { |
|
|
355 |
this._command('useCSS', false); |
|
|
356 |
} |
|
|
357 |
if (inst.EditorSelection.hasCursor()) { |
|
|
358 |
if (sel.isCollapsed) { |
|
|
359 |
if (sel.anchorNode && (sel.anchorNode.get('innerHTML') === ' ')) { |
|
|
360 |
sel.anchorNode.setStyle('backgroundColor', val); |
|
|
361 |
n = sel.anchorNode; |
|
|
362 |
} else { |
|
|
363 |
n = this.command('inserthtml', |
|
|
364 |
'<span style="background-color: ' + val + '">' + inst.EditorSelection.CURSOR + '</span>'); |
|
|
365 |
sel.focusCursor(true, true); |
|
|
366 |
} |
|
|
367 |
return n; |
|
|
368 |
} else { |
|
|
369 |
return this._command(cmd, val); |
|
|
370 |
} |
|
|
371 |
} else { |
|
|
372 |
this._command(cmd, val); |
|
|
373 |
} |
|
|
374 |
}, |
|
|
375 |
/** |
|
|
376 |
* Sugar method, calles backcolor |
|
|
377 |
* @method hilitecolor |
|
|
378 |
* @static |
|
|
379 |
* @param {String} cmd The command executed: backcolor |
|
|
380 |
* @param {String} val The color value to apply |
|
|
381 |
* @return {NodeList} NodeList of the items touched by this command. |
|
|
382 |
*/ |
|
|
383 |
hilitecolor: function() { |
|
|
384 |
return ExecCommand.COMMANDS.backcolor.apply(this, arguments); |
|
|
385 |
}, |
|
|
386 |
/** |
|
|
387 |
* Adds a font name to the current selection, or creates a new element and applies it |
|
|
388 |
* @method fontname2 |
|
|
389 |
* @deprecated |
|
|
390 |
* @static |
|
|
391 |
* @param {String} cmd The command executed: fontname |
|
|
392 |
* @param {String} val The font name to apply |
|
|
393 |
* @return {NodeList} NodeList of the items touched by this command. |
|
|
394 |
*/ |
|
|
395 |
fontname2: function(cmd, val) { |
|
|
396 |
this._command('fontname', val); |
|
|
397 |
var inst = this.getInstance(), |
|
|
398 |
sel = new inst.EditorSelection(); |
|
|
399 |
|
|
|
400 |
if (sel.isCollapsed && (this._lastKey !== 32)) { |
|
|
401 |
if (sel.anchorNode.test('font')) { |
|
|
402 |
sel.anchorNode.set('face', val); |
|
|
403 |
} |
|
|
404 |
} |
|
|
405 |
}, |
|
|
406 |
/** |
|
|
407 |
* Adds a fontsize to the current selection, or creates a new element and applies it |
|
|
408 |
* @method fontsize2 |
|
|
409 |
* @deprecated |
|
|
410 |
* @static |
|
|
411 |
* @param {String} cmd The command executed: fontsize |
|
|
412 |
* @param {String} val The font size to apply |
|
|
413 |
* @return {NodeList} NodeList of the items touched by this command. |
|
|
414 |
*/ |
|
|
415 |
fontsize2: function(cmd, val) { |
|
|
416 |
this._command('fontsize', val); |
|
|
417 |
|
|
|
418 |
var inst = this.getInstance(), |
|
|
419 |
sel = new inst.EditorSelection(), p; |
|
|
420 |
|
|
|
421 |
if (sel.isCollapsed && sel.anchorNode && (this._lastKey !== 32)) { |
|
|
422 |
if (Y.UA.webkit) { |
|
|
423 |
if (sel.anchorNode.getStyle('lineHeight')) { |
|
|
424 |
sel.anchorNode.setStyle('lineHeight', ''); |
|
|
425 |
} |
|
|
426 |
} |
|
|
427 |
if (sel.anchorNode.test('font')) { |
|
|
428 |
sel.anchorNode.set('size', val); |
|
|
429 |
} else if (Y.UA.gecko) { |
|
|
430 |
p = sel.anchorNode.ancestor(inst.EditorSelection.DEFAULT_BLOCK_TAG); |
|
|
431 |
if (p) { |
|
|
432 |
p.setStyle('fontSize', ''); |
|
|
433 |
} |
|
|
434 |
} |
|
|
435 |
} |
|
|
436 |
}, |
|
|
437 |
/** |
|
|
438 |
* Overload for list |
|
|
439 |
* @method insertorderedlist |
|
|
440 |
* @static |
|
|
441 |
* @param {String} cmd The command executed: list, ul |
|
|
442 |
*/ |
|
|
443 |
insertunorderedlist: function() { |
|
|
444 |
this.command('list', 'ul'); |
|
|
445 |
}, |
|
|
446 |
/** |
|
|
447 |
* Overload for list |
|
|
448 |
* @method insertunorderedlist |
|
|
449 |
* @static |
|
|
450 |
* @param {String} cmd The command executed: list, ol |
|
|
451 |
*/ |
|
|
452 |
insertorderedlist: function() { |
|
|
453 |
this.command('list', 'ol'); |
|
|
454 |
}, |
|
|
455 |
/** |
|
|
456 |
* Noramlizes lists creation/destruction for IE. All others pass through to native calls |
|
|
457 |
* @method list |
|
|
458 |
* @static |
|
|
459 |
* @param {String} cmd The command executed: list (not used) |
|
|
460 |
* @param {String} tag The tag to deal with |
|
|
461 |
*/ |
|
|
462 |
list: function(cmd, tag) { |
|
|
463 |
var inst = this.getInstance(), html, self = this, |
|
|
464 |
/* |
|
|
465 |
The yui3- class name below is not a skinnable class, |
|
|
466 |
it's a utility class used internally by editor and |
|
|
467 |
stripped when completed, calling getClassName on this |
|
|
468 |
is a waste of resources. |
|
|
469 |
*/ |
|
|
470 |
DIR = 'dir', cls = 'yui3-touched', |
|
|
471 |
dir, range, div, elm, n, str, s, par, list, lis, |
|
|
472 |
useP = (inst.host.editorPara ? true : false), tmp, |
|
|
473 |
sdir, hasPParent, fc, |
|
|
474 |
root = inst.EditorSelection.ROOT, |
|
|
475 |
sel = new inst.EditorSelection(); |
|
|
476 |
|
|
|
477 |
cmd = 'insert' + ((tag === 'ul') ? 'un' : '') + 'orderedlist'; |
|
|
478 |
|
|
|
479 |
if (Y.UA.ie && Y.UA.ie < 11 && !sel.isCollapsed) { |
|
|
480 |
range = sel._selection; |
|
|
481 |
html = range.htmlText; |
|
|
482 |
div = inst.Node.create(html) || root; |
|
|
483 |
|
|
|
484 |
if (div.test('li') || div.one('li')) { |
|
|
485 |
this._command(cmd, null); |
|
|
486 |
return; |
|
|
487 |
} |
|
|
488 |
if (div.test(tag)) { |
|
|
489 |
elm = range.item ? range.item(0) : range.parentElement(); |
|
|
490 |
n = inst.one(elm); |
|
|
491 |
lis = n.all('li'); |
|
|
492 |
|
|
|
493 |
str = '<div>'; |
|
|
494 |
lis.each(function(l) { |
|
|
495 |
str = self._wrapContent(l.get('innerHTML')); |
|
|
496 |
}); |
|
|
497 |
str += '</div>'; |
|
|
498 |
s = inst.Node.create(str); |
|
|
499 |
if (n.get('parentNode').test('div')) { |
|
|
500 |
n = n.get('parentNode'); |
|
|
501 |
} |
|
|
502 |
if (n && n.hasAttribute(DIR)) { |
|
|
503 |
if (useP) { |
|
|
504 |
s.all('p').setAttribute(DIR, n.getAttribute(DIR)); |
|
|
505 |
} else { |
|
|
506 |
s.setAttribute(DIR, n.getAttribute(DIR)); |
|
|
507 |
} |
|
|
508 |
} |
|
|
509 |
if (useP) { |
|
|
510 |
n.replace(s.get('innerHTML')); |
|
|
511 |
} else { |
|
|
512 |
n.replace(s); |
|
|
513 |
} |
|
|
514 |
if (range.moveToElementText) { |
|
|
515 |
range.moveToElementText(s._node); |
|
|
516 |
} |
|
|
517 |
range.select(); |
|
|
518 |
} else { |
|
|
519 |
par = Y.one(range.parentElement()); |
|
|
520 |
if (!par.test(inst.EditorSelection.BLOCKS)) { |
|
|
521 |
par = par.ancestor(inst.EditorSelection.BLOCKS); |
|
|
522 |
} |
|
|
523 |
if (par) { |
|
|
524 |
if (par.hasAttribute(DIR)) { |
|
|
525 |
dir = par.getAttribute(DIR); |
|
|
526 |
} |
|
|
527 |
} |
|
|
528 |
if (html.indexOf('<br>') > -1) { |
|
|
529 |
html = html.split(/<br>/i); |
|
|
530 |
} else { |
|
|
531 |
tmp = inst.Node.create(html); |
|
|
532 |
ps = tmp ? tmp.all('p') : null; |
|
|
533 |
|
|
|
534 |
if (ps && ps.size()) { |
|
|
535 |
html = []; |
|
|
536 |
ps.each(function(n) { |
|
|
537 |
html.push(n.get('innerHTML')); |
|
|
538 |
}); |
|
|
539 |
} else { |
|
|
540 |
html = [html]; |
|
|
541 |
} |
|
|
542 |
} |
|
|
543 |
list = '<' + tag + ' id="ie-list">'; |
|
|
544 |
Y.each(html, function(v) { |
|
|
545 |
var a = inst.Node.create(v); |
|
|
546 |
if (a && a.test('p')) { |
|
|
547 |
if (a.hasAttribute(DIR)) { |
|
|
548 |
dir = a.getAttribute(DIR); |
|
|
549 |
} |
|
|
550 |
v = a.get('innerHTML'); |
|
|
551 |
} |
|
|
552 |
list += '<li>' + v + '</li>'; |
|
|
553 |
}); |
|
|
554 |
list += '</' + tag + '>'; |
|
|
555 |
range.pasteHTML(list); |
|
|
556 |
elm = inst.config.doc.getElementById('ie-list'); |
|
|
557 |
elm.id = ''; |
|
|
558 |
if (dir) { |
|
|
559 |
elm.setAttribute(DIR, dir); |
|
|
560 |
} |
|
|
561 |
if (range.moveToElementText) { |
|
|
562 |
range.moveToElementText(elm); |
|
|
563 |
} |
|
|
564 |
range.select(); |
|
|
565 |
} |
|
|
566 |
} else if (Y.UA.ie && Y.UA.ie < 11) { |
|
|
567 |
par = inst.one(sel._selection.parentElement()); |
|
|
568 |
if (par.test('p')) { |
|
|
569 |
if (par && par.hasAttribute(DIR)) { |
|
|
570 |
dir = par.getAttribute(DIR); |
|
|
571 |
} |
|
|
572 |
html = Y.EditorSelection.getText(par); |
|
|
573 |
if (html === '') { |
|
|
574 |
sdir = ''; |
|
|
575 |
if (dir) { |
|
|
576 |
sdir = ' dir="' + dir + '"'; |
|
|
577 |
} |
|
|
578 |
list = inst.Node.create(Y.Lang.sub('<{tag}{dir}><li></li></{tag}>', { tag: tag, dir: sdir })); |
|
|
579 |
par.replace(list); |
|
|
580 |
sel.selectNode(list.one('li')); |
|
|
581 |
} else { |
|
|
582 |
this._command(cmd, null); |
|
|
583 |
} |
|
|
584 |
} else { |
|
|
585 |
this._command(cmd, null); |
|
|
586 |
} |
|
|
587 |
} else { |
|
|
588 |
root.all(tag).addClass(cls); |
|
|
589 |
if (sel.anchorNode.test(inst.EditorSelection.BLOCKS)) { |
|
|
590 |
par = sel.anchorNode; |
|
|
591 |
} else { |
|
|
592 |
par = sel.anchorNode.ancestor(inst.EditorSelection.BLOCKS); |
|
|
593 |
} |
|
|
594 |
if (!par) { //No parent, find the first block under the anchorNode |
|
|
595 |
par = sel.anchorNode.one(inst.EditorSelection.BLOCKS); |
|
|
596 |
} |
|
|
597 |
|
|
|
598 |
if (par && par.hasAttribute(DIR)) { |
|
|
599 |
dir = par.getAttribute(DIR); |
|
|
600 |
} |
|
|
601 |
if (par && par.test(tag)) { |
|
|
602 |
hasPParent = par.ancestor('p'); |
|
|
603 |
html = inst.Node.create('<div/>'); |
|
|
604 |
elm = par.all('li'); |
|
|
605 |
elm.each(function(h) { |
|
|
606 |
html.append(self._wrapContent(h.get('innerHTML'), hasPParent)); |
|
|
607 |
}); |
|
|
608 |
if (dir) { |
|
|
609 |
if (useP) { |
|
|
610 |
html.all('p').setAttribute(DIR, dir); |
|
|
611 |
} else { |
|
|
612 |
html.setAttribute(DIR, dir); |
|
|
613 |
} |
|
|
614 |
} |
|
|
615 |
if (useP) { |
|
|
616 |
html = inst.Node.create(html.get('innerHTML')); |
|
|
617 |
} |
|
|
618 |
fc = html.get('firstChild'); |
|
|
619 |
par.replace(html); |
|
|
620 |
sel.selectNode(fc); |
|
|
621 |
} else { |
|
|
622 |
this._command(cmd, null); |
|
|
623 |
} |
|
|
624 |
list = root.all(tag); |
|
|
625 |
if (dir) { |
|
|
626 |
if (list.size()) { |
|
|
627 |
//Changed to a List |
|
|
628 |
list.each(function(n) { |
|
|
629 |
if (!n.hasClass(cls)) { |
|
|
630 |
n.setAttribute(DIR, dir); |
|
|
631 |
} |
|
|
632 |
}); |
|
|
633 |
} |
|
|
634 |
} |
|
|
635 |
|
|
|
636 |
list.removeClass(cls); |
|
|
637 |
} |
|
|
638 |
}, |
|
|
639 |
/** |
|
|
640 |
* Noramlizes alignment for Webkit Browsers |
|
|
641 |
* @method justify |
|
|
642 |
* @static |
|
|
643 |
* @param {String} cmd The command executed: justify (not used) |
|
|
644 |
* @param {String} val The actual command from the justify{center,all,left,right} stubs |
|
|
645 |
*/ |
|
|
646 |
justify: function(cmd, val) { |
|
|
647 |
if (Y.UA.webkit) { |
|
|
648 |
var inst = this.getInstance(), |
|
|
649 |
sel = new inst.EditorSelection(), |
|
|
650 |
aNode = sel.anchorNode, html, |
|
|
651 |
bgColor = aNode.getStyle('backgroundColor'); |
|
|
652 |
|
|
|
653 |
this._command(val); |
|
|
654 |
sel = new inst.EditorSelection(); |
|
|
655 |
if (sel.anchorNode.test('div')) { |
|
|
656 |
html = '<span>' + sel.anchorNode.get('innerHTML') + '</span>'; |
|
|
657 |
sel.anchorNode.set('innerHTML', html); |
|
|
658 |
sel.anchorNode.one('span').setStyle('backgroundColor', bgColor); |
|
|
659 |
sel.selectNode(sel.anchorNode.one('span')); |
|
|
660 |
} |
|
|
661 |
} else { |
|
|
662 |
this._command(val); |
|
|
663 |
} |
|
|
664 |
}, |
|
|
665 |
/** |
|
|
666 |
* Override method for justify |
|
|
667 |
* @method justifycenter |
|
|
668 |
* @static |
|
|
669 |
*/ |
|
|
670 |
justifycenter: function() { |
|
|
671 |
this.command('justify', 'justifycenter'); |
|
|
672 |
}, |
|
|
673 |
/** |
|
|
674 |
* Override method for justify |
|
|
675 |
* @method justifyleft |
|
|
676 |
* @static |
|
|
677 |
*/ |
|
|
678 |
justifyleft: function() { |
|
|
679 |
this.command('justify', 'justifyleft'); |
|
|
680 |
}, |
|
|
681 |
/** |
|
|
682 |
* Override method for justify |
|
|
683 |
* @method justifyright |
|
|
684 |
* @static |
|
|
685 |
*/ |
|
|
686 |
justifyright: function() { |
|
|
687 |
this.command('justify', 'justifyright'); |
|
|
688 |
}, |
|
|
689 |
/** |
|
|
690 |
* Override method for justify |
|
|
691 |
* @method justifyfull |
|
|
692 |
* @static |
|
|
693 |
*/ |
|
|
694 |
justifyfull: function() { |
|
|
695 |
this.command('justify', 'justifyfull'); |
|
|
696 |
} |
|
|
697 |
} |
|
|
698 |
}); |
|
|
699 |
|
|
|
700 |
if (Y.UA.ie && Y.UA.ie < 11) { |
|
|
701 |
ExecCommand.COMMANDS.bold = function() { |
|
|
702 |
fixIETags.call(this, 'bold', 'b', 'FONT-WEIGHT: bold'); |
|
|
703 |
}; |
|
|
704 |
ExecCommand.COMMANDS.italic = function() { |
|
|
705 |
fixIETags.call(this, 'italic', 'i', 'FONT-STYLE: italic'); |
|
|
706 |
}; |
|
|
707 |
ExecCommand.COMMANDS.underline = function() { |
|
|
708 |
fixIETags.call(this, 'underline', 'u', 'TEXT-DECORATION: underline'); |
|
|
709 |
}; |
|
|
710 |
} |
|
|
711 |
|
|
|
712 |
Y.namespace('Plugin'); |
|
|
713 |
Y.Plugin.ExecCommand = ExecCommand; |
|
|
714 |
|
|
|
715 |
|
|
|
716 |
|
|
|
717 |
}, '@VERSION@', {"requires": ["frame"]}); |