| blob | 266453f804a8de7b5953fd44b7b351b350e19293 |
1 /*
2 Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3 Code licensed under the BSD License:
4 http://developer.yahoo.net/yui/license.txt
5 version: 2.3.0
6 */
7 /*
8 Copyright (c) 2007, Yahoo! Inc. All rights reserved.
9 Code licensed under the BSD License:
10 http://developer.yahoo.net/yui/license.txt
11 */
12 /**
13 * @description <p>Creates a rich Toolbar widget based on Button. Primarily used with the Rich Text Editor</p>
14 * @class Toolbar
15 * @namespace YAHOO.widget
16 * @requires yahoo, dom, element, event
17 * @optional container, menu, button, dragdrop
18 * @beta
19 */
21 /**
22 * @private
23 **/
28 /**
29 * Provides a rich toolbar widget based on the button and menu widgets
30 * @constructor
31 * @param {String/HTMLElement} el The element to turn into a toolbar.
32 * @param {Object} attrs Object liternal containing configuration parameters.
33 */
40 }
45 attributes: local_attrs
46 }
53 }
62 YAHOO.log('Container found in config appending to it (' + Dom.get(local_attrs.container).id + ')', 'info', 'Toolbar');
64 }
65 }
71 }
85 }
87 /**
88 * @method _addMenuClasses
89 * @private
90 * @description This method is called from Menu's renderEvent to add a few more classes to the menu items
91 * @param {String} ev The event that fired.
92 * @param {Array} na Array of event information.
93 * @param {Object} o Button config object.
94 */
100 }
103 Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-').toLowerCase() : items[i]._oText.nodeValue.replace(/ /g, '-').toLowerCase()));
104 Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-') : items[i]._oText.nodeValue.replace(/ /g, '-')));
105 }
107 };
110 /**
111 * @property dd
112 * @description The DragDrop instance associated with the Toolbar
113 * @type Object
114 */
116 /**
117 * @property _colorData
118 * @description Object reference containing colors hex and text values.
119 * @type Object
120 */
121 _colorData: {
122 /* {{{ _colorData */
267 /* }}} */
268 },
269 /**
270 * @property _colorPicker
271 * @description The HTML Element containing the colorPicker
272 * @type HTMLElement
273 */
275 /**
276 * @property STR_COLLAPSE
277 * @description String for Toolbar Collapse Button
278 * @type String
279 */
281 /**
282 * @property STR_SPIN_LABEL
283 * @description String for spinbutton dynamic label. Note the {VALUE} will be replaced with YAHOO.lang.substitute
284 * @type String
285 */
286 STR_SPIN_LABEL: 'Spin Button with value {VALUE}. Use Control Shift Up Arrow and Control Shift Down arrow keys to increase or decrease the value.',
287 /**
288 * @property STR_SPIN_UP
289 * @description String for spinbutton up
290 * @type String
291 */
293 /**
294 * @property STR_SPIN_DOWN
295 * @description String for spinbutton down
296 * @type String
297 */
299 /**
300 * @property _titlebar
301 * @description Object reference to the titlebar
302 * @type HTMLElement
303 */
305 /**
306 * @property _disabled
307 * @description Object to track button status when enabling/disabling the toolbar
308 * @type Object
309 */
311 /**
312 * @property browser
313 * @description Standard browser detection
314 * @type Object
315 */
317 /**
318 * @protected
319 * @property _buttonList
320 * @description Internal property list of current buttons in the toolbar
321 * @type Array
322 */
324 /**
325 * @protected
326 * @property _buttonGroupList
327 * @description Internal property list of current button groups in the toolbar
328 * @type Array
329 */
331 /**
332 * @protected
333 * @property _sep
334 * @description Internal reference to the separator HTML Element for cloning
335 * @type HTMLElement
336 */
338 /**
339 * @protected
340 * @property _sepCount
341 * @description Internal refernce for counting separators, so we can give them a useful class name for styling
342 * @type Number
343 */
345 /**
346 * @protected
347 * @property draghandle
348 * @type HTMLElement
349 */
351 /**
352 * @protected
353 * @property _toolbarConfigs
354 * @type Object
355 */
356 _toolbarConfigs: {
358 },
359 /**
360 * @protected
361 * @property CLASS_CONTAINER
362 * @description Default CSS class to apply to the toolbar container element
363 * @type String
364 */
366 /**
367 * @protected
368 * @property CLASS_DRAGHANDLE
369 * @description Default CSS class to apply to the toolbar's drag handle element
370 * @type String
371 */
373 /**
374 * @protected
375 * @property CLASS_SEPARATOR
376 * @description Default CSS class to apply to all separators in the toolbar
377 * @type String
378 */
380 /**
381 * @protected
382 * @property CLASS_DISABLED
383 * @description Default CSS class to apply when the toolbar is disabled
384 * @type String
385 */
387 /**
388 * @protected
389 * @property CLASS_PREFIX
390 * @description Default prefix for dynamically created class names
391 * @type String
392 */
394 /**
395 * @method init
396 * @description The Toolbar class's initialization method
397 */
400 },
401 /**
402 * @method initAttributes
403 * @description Initializes all of the configuration attributes used to create
404 * the toolbar.
405 * @param {Object} attr Object literal specifying a set of
406 * configuration attributes used to create the toolbar.
407 */
414 /**
415 * @config buttons
416 * @description Object specifying the buttons to include in the toolbar
417 * Example:
418 * <code><pre>
419 * {
420 * { id: 'b3', type: 'button', label: 'Underline', value: 'underline' },
421 * { type: 'separator' },
422 * { id: 'b4', type: 'menu', label: 'Align', value: 'align',
423 * menu: [
424 * { text: "Left", value: 'alignleft' },
425 * { text: "Center", value: 'aligncenter' },
426 * { text: "Right", value: 'alignright' }
427 * ]
428 * }
429 * }
430 * </pre></code>
431 * @type Object
432 */
435 value: [],
446 }
447 }
448 }
449 }
450 });
452 /**
453 * @config disabled
454 * @description Boolean indicating if the toolbar should be disabled. It will also disable the draggable attribute if it is on.
455 * @default false
456 * @type Boolean
457 */
463 }
470 //Draggable by default, set it back
472 }
473 }
477 //If it's already disabled, flag it
482 }
485 //Check to see if it was disabled by default and skip it
490 }
493 }
494 }
495 }
496 }
497 });
499 /**
500 * @config grouplabels
501 * @description Boolean indicating if the toolbar should show the group label's text string.
502 * @default true
503 * @type Boolean
504 */
508 });
510 /**
511 * @config cont
512 * @description Boolean indicating if the toolbar should show the group label's text string.
513 * @default true
514 * @type Boolean
515 */
519 });
521 /**
522 * @config collapse
523 * @description Boolean indicating if the the titlebar should have a collapse button.
524 * The collapse button will not remove the toolbar, it will minimize it to the titlebar
525 * @default false
526 * @type Boolean
527 */
530 });
531 /**
532 * @config titlebar
533 * @description Boolean indicating if the toolbar should have a titlebar. If
534 * passed a string, it will use that as the titlebar text
535 * @default false
536 * @type Boolean or String
537 */
544 }
552 }
569 }
571 }
576 }
581 }
585 }
586 }
587 }
588 });
591 /**
592 * @config draggable
593 * @description Boolean indicating if the toolbar should be draggable.
594 * @default false
595 * @type Boolean
596 */
615 }
616 /**
617 * @property dd
618 * @description The DragDrop instance associated with the Toolbar
619 * @type Object
620 */
624 }
631 }
632 }
643 }
644 }
645 }
646 },
651 }
653 }
654 });
656 },
657 /**
658 * @method addButtonGroup
659 * @description Add a new button group to the toolbar. (uses addButton)
660 * @param {Object} oGroup Object literal reference to the Groups Config (contains an array of button configs)
661 */
666 }
670 }
678 }
682 //For accessibility, let's put all of the group buttons in an Unordered List
688 }
700 }
701 }
702 },
703 /**
704 * @method addButtonToGroup
705 * @description Add a new button to a toolbar group. Buttons supported:
706 * push, split, menu, select, color, spin
707 * @param {Object} oButton Object literal reference to the Button's Config
708 * @param {String} group The Group identifier passed into the initial config
709 * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
710 */
717 },
718 /**
719 * @method addButton
720 * @description Add a new button to the toolbar. Buttons supported:
721 * push, split, menu, select, color, spin
722 * @param {Object} oButton Object literal reference to the Button's Config
723 * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
724 */
729 }
732 }
733 //Add to .get('buttons') manually
738 }
748 }
750 //This line made Opera fire the click event and the mousedown,
751 // so events for menus where firing twice.
752 //this._buttonClick('click', oButton);
753 },
755 }
757 }
758 }
759 }
760 }
766 }
767 }
768 }
771 }
774 }
777 }
782 });
787 }
788 }
791 }
792 }
793 }
796 //Toolbar is disabled, disable the new button too!
798 }
801 }
811 }
814 }
815 }
820 //Replace the Button HTML Element with an a href
826 });
832 }
836 }
838 }
848 }
856 }
857 }
859 };
870 //Stop the mousedown event so we can trap the selection in the editor!
873 });
876 });
878 //Hijack the mousedown event in the menu and make it fire a button click..
886 }
891 });
895 });
896 }
898 //Stop the mousedown event so we can trap the selection in the editor!
901 });
904 });
905 }
907 //Add a couple of new events for IE
911 //Stop them so we don't loose focus in the Editor
922 }
924 //This will keep the document from gaining focus and the editor from loosing it..
925 //Forcefully remove the focus calls in button!
928 }
929 }
933 YAHOO.log('Button type is (' + oButton.type + '), doing extra renderer work.', 'info', 'Toolbar');
938 }
939 }
940 }
942 },
943 /**
944 * @method addSeparator
945 * @description Add a new button separator to the toolbar.
946 * @param {HTMLElement} cont Optional HTML element to insert this button into.
947 * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
948 */
953 }
958 }
961 }
967 }
980 }
986 }
987 }
990 }
992 },
993 /**
994 * @method _createColorPicker
995 * @private
996 * @description Creates the core DOM reference to the color picker menu item.
997 * @param {String} id the id of the toolbar to prefix this DOM container with.
998 */
1002 }
1017 }
1018 }
1029 }
1033 });
1036 });
1041 this.fireEvent('colorPickerClicked', { type: 'colorPickerClicked', target: this, button: this._colorPicker._button, color: tar.innerHTML, colorName: this._colorData['#' + tar.innerHTML] } );
1043 }
1045 },
1046 /**
1047 * @method _resetColorPicker
1048 * @private
1049 * @description Clears the currently selected color or mouseover color in the color picker.
1050 */
1056 },
1057 /**
1058 * @method _makeColorButton
1059 * @private
1060 * @description Called to turn a "color" button into a menu button with an Overlay for the menu.
1061 * @param {Object} _oButton <a href="YAHOO.widget.Button.html">YAHOO.widget.Button</a> reference
1062 */
1066 }
1068 _oButton.menu = new YAHOO.widget.Overlay(this.get('id') + '_' + _oButton.value + '_menu', { visbile: false, position: 'absolute' });
1073 _oButton.menu.cfg.setProperty('context', [this.getButtonById(_oButton.id).get('element'), 'tl', 'bl']); //Re Adjust the overlay.. not sure why.
1074 //Move the DOM reference of the color picker to the Overlay that we are about to show.
1078 //if (_p.parentNode != _oButton.menu.body) {
1080 //}
1081 }
1087 },
1088 /**
1089 * @private
1090 * @method _makeSpinButton
1091 * @description Create a button similar to an OS Spin button.. It has an up/down arrow combo to scroll through a range of int values.
1092 * @param {Object} _button <a href="YAHOO.widget.Button.html">YAHOO.widget.Button</a> reference
1093 * @param {Object} oButton Object literal containing the buttons initial config
1094 */
1098 _par = _button._button.parentNode.parentNode, //parentNode of Button Element for appending child
1105 //Setup the up and down arrows
1113 //Append them to the container
1124 };
1131 }
1137 value++;
1143 //tbar.focus(); //We do this for accessibility, on the re-focus of the element, a screen reader will re-read the title that was just changed
1144 //_button.focus();
1145 }
1147 }
1148 };
1154 value--;
1161 //tbar.focus(); //We do this for accessibility, on the re-focus of the element, a screen reader will re-read the title that was just changed
1162 //_button.focus();
1163 }
1165 }
1166 };
1177 }
1178 };
1180 //Handle arrow keys..
1183 //Listen for the click on the up button and act on it
1184 //Listen for the click on the down button and act on it
1193 },
1194 /**
1195 * @protected
1196 * @method _buttonClick
1197 * @description Click handler for all buttons in the toolbar.
1198 * @param {String} ev The event that was passed in.
1199 * @param {Object} info Object literal of information about the button that was clicked.
1200 */
1210 }
1211 }
1216 this.fireEvent(info.value + 'Click', { type: info.value + 'Click', target: this.get('element'), button: info });
1217 }
1221 this.fireEvent(info.menucmd + 'Click', { type: info.menucmd + 'Click', target: this.get('element'), button: info });
1222 }
1225 this.fireEvent('buttonClick', { type: 'buttonClick', target: this.get('element'), button: info });
1234 }
1235 }
1236 button.set('label', '<span class="yui-toolbar-' + info.menucmd + '-' + (info.value).replace(/ /g, '-').toLowerCase() + '">' + txt + '</span>');
1237 var _items = button.getMenu().getItems();
1238 for (var m = 0; m < _items.length; m++) {
1239 if (_items[m].value.toLowerCase() == info.value.toLowerCase()) {
1241 } else {
1243 }
1244 }
1245 }
1246 }
1247 if (ev) {
1248 Event.stopEvent(ev);
1249 }
1250 },
1251 /**
1252 * @method getButtonById
1253 * @description Gets a button instance from the toolbar by is Dom id.
1254 * @param {String} id The Dom id to query for.
1255 * @return {<a href="YAHOO.widget.Button.html">YAHOO.widget.Button</a>}
1256 */
1257 getButtonById: function(id) {
1258 var len = this._buttonList.length;
1259 for (var i = 0; i < len; i++) {
1261 return this._buttonList[i];
1262 }
1263 }
1264 return false;
1265 },
1266 /**
1267 * @method getButtonByValue
1270 * @return {<a href="YAHOO.widget.Button.html">YAHOO.widget.Button</a> or <a href="YAHOO.widget.MenuItem.html">YAHOO.widget.MenuItem</a>}
1271 */
1280 }
1285 }
1286 }
1287 }
1288 }
1292 }
1297 }
1298 }
1299 }
1300 }
1301 }
1303 },
1304 /**
1305 * @method getButtonByIndex
1306 * @description Gets a button instance from the toolbar by is index in _buttonList.
1307 * @param {Number} index The index of the button in _buttonList.
1308 * @return {<a href="YAHOO.widget.Button.html">YAHOO.widget.Button</a>}
1309 */
1315 }
1316 },
1317 /**
1318 * @method getButtons
1319 * @description Returns an array of buttons in the current toolbar
1320 * @return {Array}
1321 */
1324 },
1325 /**
1326 * @method disableButton
1327 * @description Disables a button in the toolbar.
1328 * @param {String/Number} button Disable a button by it's id or index.
1329 * @return {Boolean}
1330 */
1334 }
1337 }
1342 }
1343 },
1344 /**
1345 * @method enableButton
1346 * @description Enables a button in the toolbar.
1347 * @param {String/Number} button Enable a button by it's id or index.
1348 * @return {Boolean}
1349 */
1353 }
1356 }
1361 }
1362 },
1363 /**
1364 * @method selectButton
1365 * @description Selects a button in the toolbar.
1366 * @param {String/Number} button select a button by it's id or index.
1367 * @return {Boolean}
1368 */
1373 }
1376 }
1385 button.set('label', '<span class="yui-toolbar-' + button.get('value') + '-' + (value).replace(/ /g, '-').toLowerCase() + '">' + _items[m]._oText.nodeValue + '</span>');
1386 } else {
1388 }
1389 }
1390 }
1391 } else {
1392 return false;
1393 }
1394 }
1395 },
1396 /**
1397 * @method deselectButton
1398 * @description Deselects a button in the toolbar.
1401 */
1405 }
1408 }
1415 }
1416 },
1417 /**
1418 * @method deselectAllButtons
1419 * @description Deselects all buttons in the toolbar.
1420 * @return {Boolean}
1421 */
1426 }
1427 },
1428 /**
1429 * @method destroyButton
1430 * @description Destroy a button in the toolbar.
1431 * @param {String/Number} button Destroy a button by it's id or index.
1432 * @return {Boolean}
1433 */
1437 }
1440 }
1449 }
1450 }
1453 }
1455 },
1456 /**
1457 * @method destroy
1458 * @description Destroys the toolbar, all of it's elements and objects.
1459 * @return {Boolean}
1460 */
1464 //Brutal Object Destroy
1468 }
1469 }
1471 },
1472 /**
1473 * @method toString
1474 * @description Returns a string representing the toolbar.
1475 * @return {String}
1476 */
1478 return 'Toolbar (#' + this.get('element').id + ') with ' + this._buttonList.length + ' buttons.';
1479 }
1480 });
1481 /**
1482 * @event buttonClick
1483 * @param {Object} o The object passed to this handler is the button config used to create the button.
1484 * @description Fires when any botton receives a click event. Passes back a single object representing the buttons config object. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
1485 * @type YAHOO.util.CustomEvent
1486 */
1487 /**
1488 * @event valueClick
1489 * @param {Object} o The object passed to this handler is the button config used to create the button.
1490 * @description This is a special dynamic event that is created and dispatched based on the value property
1491 * of the button config. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
1492 * Example:
1493 * <code><pre>
1494 * buttons : [
1495 * { type: 'button', value: 'test', value: 'testButton' }
1496 * ]</pre>
1497 * </code>
1498 * With the valueClick event you could subscribe to this buttons click event with this:
1499 * tbar.in('testButtonClick', function() { alert('test button clicked'); })
1500 * @type YAHOO.util.CustomEvent
1501 */
1502 /**
1503 * @event toolbarExpanded
1504 * @description Fires when the toolbar is expanded via the collapse button. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
1505 * @type YAHOO.util.CustomEvent
1506 */
1507 /**
1508 * @event toolbarCollapsed
1509 * @description Fires when the toolbar is collapsed via the collapse button. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
1510 * @type YAHOO.util.CustomEvent
1511 */
1512 })();
1513 /*
1514 Copyright (c) 2007, Yahoo! Inc. All rights reserved.
1515 Code licensed under the BSD License:
1516 http://developer.yahoo.net/yui/license.txt
1517 */
1518 /**
1519 * @module editor
1520 * @description <p>The Rich Text Editor is a UI control that replaces a standard HTML textarea; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor's toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.</p>
1521 * @namespace YAHOO.widget
1522 * @requires yahoo, dom, element, event, toolbar, container, menu, button
1523 * @optional dragdrop, animation
1524 * @beta
1525 */
1535 /**
1536 * The Rich Text Editor is a UI control that replaces a standard HTML textarea; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor's toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.
1537 * @constructor
1538 * @class Editor
1539 * @extends YAHOO.util.Element
1540 * @param {String/HTMLElement} el The textarea element to turn into an editor.
1541 * @param {Object} attrs Object liternal containing configuration parameters.
1542 */
1550 }
1554 }
1559 });
1571 }
1578 }
1586 }
1588 /**
1589 * @private _cleanClassName
1590 * @description Makes a useable classname from dynamic data, by dropping it to lowercase and replacing spaces with -'s.
1591 * @param {String} str The classname to clean up
1592 * @returns {String}
1593 */
1596 }
1598 /**
1599 * @private _createIframe
1600 * @description Creates the DOM and YUI Element for the iFrame editor area.
1601 * @param {String} id The string ID to prefix the iframe with
1602 * @returns {Object} iFrame object
1603 */
1618 }
1622 }
1623 }
1628 }
1631 /**
1632 * @property DOMReady
1633 * @private
1634 * @description Flag to determine if DOM is ready or not
1635 * @type Boolean
1636 */
1638 /**
1639 * @property _selection
1640 * @private
1641 * @description Holder for caching iframe selections
1642 * @type Object
1643 */
1645 /**
1646 * @property _mask
1647 * @private
1648 * @description DOM Element holder for the editor Mask when disabled
1649 * @type Object
1650 */
1652 /**
1653 * @property _showingHiddenElements
1654 * @private
1655 * @description Status of the hidden elements button
1656 * @type Boolean
1657 */
1659 /**
1660 * @property currentWindow
1661 * @description A reference to the currently open EditorWindow
1662 * @type Object
1663 */
1665 /**
1666 * @property currentEvent
1667 * @description A reference to the current editor event
1668 * @type Event
1669 */
1671 /**
1672 * @property operaEvent
1673 * @private
1674 * @description setTimeout holder for Opera and Image DoubleClick event..
1675 * @type Object
1676 */
1678 /**
1679 * @property currentFont
1680 * @description A reference to the last font selected from the Toolbar
1681 * @type HTMLElement
1682 */
1684 /**
1685 * @property currentElement
1686 * @description A reference to the current working element in the editor
1687 * @type Array
1688 */
1689 currentElement: [],
1690 /**
1691 * @property dompath
1692 * @description A reference to the dompath container for writing the current working dom path to.
1693 * @type HTMLElement
1694 */
1696 /**
1697 * @property beforeElement
1698 * @description A reference to the H2 placed before the editor for Accessibilty.
1699 * @type HTMLElement
1700 */
1702 /**
1703 * @property afterElement
1704 * @description A reference to the H2 placed after the editor for Accessibilty.
1705 * @type HTMLElement
1706 */
1708 /**
1709 * @property invalidHTML
1710 * @description Contains a list of HTML elements that are invalid inside the editor. They will be removed when they are found.
1711 * @type Object
1712 */
1713 invalidHTML: {
1724 },
1725 /**
1726 * @property toolbar
1727 * @description Local property containing the <a href="YAHOO.widget.Toolbar.html">YAHOO.widget.Toolbar</a> instance
1728 * @type <a href="YAHOO.widget.Toolbar.html">YAHOO.widget.Toolbar</a>
1729 */
1731 /**
1732 * @private
1733 * @property _contentTimer
1734 * @description setTimeout holder for documentReady check
1735 */
1737 /**
1738 * @private
1739 * @property _contentTimerCounter
1740 * @description Counter to check the number of times the body is polled for before giving up
1741 * @type Number
1742 */
1744 /**
1745 * @private
1746 * @property _disabled
1747 * @description The Toolbar items that should be disabled if there is no selection present in the editor.
1748 * @type Array
1749 */
1750 _disabled: [ 'createlink', 'forecolor', 'backcolor', 'fontname', 'fontsize', 'superscript', 'subscript', 'removeformat', 'heading', 'indent', 'outdent' ],
1751 /**
1752 * @private
1753 * @property _alwaysDisabled
1754 * @description The Toolbar items that should ALWAYS be disabled event if there is a selection present in the editor.
1755 * @type Object
1756 */
1757 _alwaysDisabled: { },
1758 /**
1759 * @private
1760 * @property _alwaysEnabled
1761 * @description The Toolbar items that should ALWAYS be enabled event if there isn't a selection present in the editor.
1762 * @type Object
1763 */
1765 /**
1766 * @private
1767 * @property _semantic
1768 * @description The Toolbar commands that we should attempt to make tags out of instead of using styles.
1769 * @type Object
1770 */
1772 /**
1773 * @private
1774 * @property _tag2cmd
1775 * @description A tag map of HTML tags to convert to the different types of commands so we can select the proper toolbar button.
1776 * @type Object
1777 */
1778 _tag2cmd: {
1793 },
1794 /**
1795 * @private
1796 * @method _getDoc
1797 * @description Get the Document of the IFRAME
1798 * @return {Object}
1799 */
1801 //if (this.get && this.get('iframe') && this.get('iframe').get && this.get('iframe').get('element') && this.get('iframe').get('element').contentWindow && this.get('iframe').get('element').contentWindow.document) {
1811 }
1812 }
1814 }
1815 }
1816 }
1817 }
1819 },
1820 /**
1821 * @private
1822 * @method _getWindow
1823 * @description Get the Window of the IFRAME
1824 * @return {Object}
1825 */
1828 },
1829 /**
1830 * @private
1831 * @method _focusWindow
1832 * @description Attempt to set the focus of the iframes window.
1833 * @param {Boolean} onLoad Safari needs some special care to set the cursor in the iframe
1834 */
1838 /**
1839 * @knownissue Safari Cursor Position
1840 * @browser Safari 2.x
1841 * @description Can't get Safari to place the cursor at the beginning of the text..
1842 * This workaround at least set's the toolbar into the proper state.
1843 */
1849 }
1851 //Check for.webkit3
1854 }
1857 }
1858 },
1859 /**
1860 * @private
1861 * @method _hasSelection
1862 * @description Determines if there is a selection in the editor document.
1863 * @returns {Boolean}
1864 */
1870 //Internet Explorer
1874 }
1877 }
1881 }
1882 }
1884 },
1885 /**
1886 * @private
1887 * @method _getSelection
1888 * @description Handles the different selection objects across the A-Grade list.
1889 * @returns {Object} Selection Object
1890 */
1898 }
1899 //Handle Safari's lack of Selection Object
1914 );
1916 }
1917 }
1918 }
1920 },
1921 /**
1922 * @private
1923 * @method _getRange
1924 * @description Handles the different range objects across the A-Grade list.
1925 * @returns {Object} Range Object
1926 */
1932 }
1941 }
1943 }
1947 }
1951 }
1953 },
1954 /**
1955 * @private
1956 * @method _setDesignMode
1957 * @description Sets the designMode of the iFrame document.
1958 * @param {String} state This should be either on or off
1959 */
1964 },
1965 /**
1966 * @private
1967 * @method _toggleDesignMode
1968 * @description Toggles the designMode of the iFrame document on and off.
1969 * @returns {String} The state that it was set to.
1970 */
1976 }
1979 },
1980 /**
1981 * @private
1982 * @method _initEditor
1983 * @description This method is fired from _checkLoaded when the document is ready. It turns on designMode and set's up the listeners.
1984 */
1989 }
1993 //Setup Listeners on iFrame
2008 }
2009 },
2010 /**
2011 * @private
2012 * @method _checkLoaded
2013 * @description Called from a setTimeout loop to check if the iframes body.onload event has fired, then it will init the editor.
2014 */
2019 }
2023 }
2025 //The onload event has fired, clean up after ourselves and fire the _initEditor method
2026 /*
2027 if (!this.browser.ie) {
2028 //IE Doesn't like this..
2029 delete this._getDoc().body._rteLoaded;
2030 this._getDoc().body.removeAttribute('onload');
2031 }
2032 */
2039 }
2040 },
2041 /**
2042 * @private
2043 * @method _setInitialContent
2044 * @description This method will open the iframes content document and write the textareas value into it, then start the body.onload checking.
2045 */
2060 },
2061 /**
2062 * @private
2063 * @method _setMarkupType
2064 * @param {String} action The action to take. Possible values are: css, default or semantic
2065 * @description This method will turn on/off the useCSS execCommand.
2066 */
2080 }
2082 }
2083 },
2084 /**
2085 * Set the editor to use CSS instead of HTML
2086 * @param {Booleen} stat True/False
2087 */
2092 }
2093 },
2094 /**
2095 * @private
2096 * @method _getSelectedElement
2097 * @description This method will attempt to locate the element that was last interacted with, either via selection, location or event.
2098 * @returns {HTMLElement} The currently selected element.
2099 */
2108 }
2109 }
2116 }
2121 }
2124 }
2125 }
2129 }
2138 }
2139 }
2140 }
2141 }
2142 }
2143 //Safari Fix
2146 //elm = Event.getTarget(this.currentEvent);
2147 }
2148 }
2149 }
2150 }
2152 if (this.currentEvent && (this.currentEvent.keyCode == undefined) && Event.getTarget(this.currentEvent)) {
2154 } else if (this.currentEvent && (this.currentEvent.keyCode != undefined) && Event.getTarget(this.currentEvent)) {
2157 }
2160 }
2165 }
2166 }
2170 }
2172 //Safari sometimes gives us the HTML node back..
2174 }
2177 },
2178 /**
2179 * @private
2180 * @method _getDomPath
2181 * @description This method will attempt to build the DOM path from the currently selected element.
2182 * @returns {Array} An array of node references that will create the DOM Path.
2183 */
2191 }
2192 //Check to see if we get el.nodeName and nodeType
2195 }
2199 }
2202 }
2206 }
2207 }
2209 },
2210 /**
2211 * @private
2212 * @method _writeDomPath
2213 * @description Write the current DOM path out to the dompath container below the editor.
2214 */
2217 pathArr = [];
2222 }
2225 }
2230 }
2231 }
2237 pathStr += ':' + path[i].getAttribute('href').replace('mailto:', '').replace('http:/'+'/', '').replace('https:/'+'/', ''); //May need to add others here ftp
2238 }
2239 }
2242 if ((classPath.indexOf('yui') != -1) || (classPath.toLowerCase().indexOf('apple-style-span') != -1)) {
2244 }
2246 }
2249 }
2251 }
2252 }
2254 //Prevent flickering
2257 }
2258 },
2259 /**
2260 * @private
2261 * @method _fixNodes
2262 * @description Fix href and imgs as well as remove invalid HTML.
2263 */
2271 }
2272 }
2273 }
2274 }
2287 }
2290 }
2291 }
2302 }
2303 }
2304 }
2314 }
2315 }
2316 }
2317 },
2318 /**
2319 * @private
2320 * @method _showHidden
2321 * @description Toggle on/off the hidden.css file.
2322 */
2334 }
2335 },
2336 /**
2337 * @private
2338 * @method _setCurrentEvent
2339 * @param {Event} ev The event to cache
2340 * @description Sets the current event property
2341 */
2345 }
2347 },
2348 /**
2349 * @private
2350 * @method _handleClick
2351 * @param {Event} ev The event we are working on.
2352 * @description Handles all click events inside the iFrame document.
2353 */
2358 }
2361 }
2362 },
2363 /**
2364 * @private
2365 * @method _handleMouseUp
2366 * @param {Event} ev The event we are working on.
2367 * @description Handles all mouseup events inside the iFrame document.
2368 */
2372 /**
2373 * @knownissue Opera appears to stop the MouseDown, Click and DoubleClick events on an image inside of a document with designMode on..
2374 * @browser Opera
2375 * @description This work around traps the MouseUp event and sets a timer to check if another MouseUp event fires in so many seconds. If another event is fired, they we internally fire the DoubleClick event.
2376 */
2389 }
2390 }
2391 }
2392 //This will stop Safari from selecting the entire document if you select all the text in the editor
2396 }
2397 }
2400 },
2401 /**
2402 * @private
2403 * @method _handleMouseDown
2404 * @param {Event} ev The event we are working on.
2405 * @description Handles all mousedown events inside the iFrame document.
2406 */
2414 }
2415 }
2416 //this.nodeChange();
2418 },
2419 /**
2420 * @private
2421 * @method _handleDoubleClick
2422 * @param {Event} ev The event we are working on.
2423 * @description Handles all doubleclick events inside the iFrame document.
2424 */
2430 this.toolbar.fireEvent('insertimageClick', { type: 'insertimageClick', target: this.toolbar });
2432 } else if (sel && sel.getAttribute && sel.getAttribute('tag') && (sel.getAttribute('tag').toLowerCase() == 'a')) {
2436 }
2439 },
2440 /**
2441 * @private
2442 * @method _handleKeyUp
2443 * @param {Event} ev The event we are working on.
2444 * @description Handles all keyup events inside the iFrame document.
2445 */
2459 }
2462 }
2464 },
2465 /**
2466 * @private
2467 * @method _handleKeyPress
2468 * @param {Event} ev The event we are working on.
2469 * @description Handles all keypress events inside the iFrame document.
2470 */
2474 },
2475 /**
2476 * @private
2477 * @method _handleKeyDown
2478 * @param {Event} ev The event we are working on.
2479 * @description Handles all keydown events inside the iFrame document.
2480 */
2485 }
2488 //if (ev.ctrlKey) {
2491 }
2498 }
2505 }
2522 }
2537 }
2541 //Insert a <br> instead of a <p></p> in Internet Explorer
2549 }
2551 }
2552 }
2553 }
2558 }
2560 },
2561 /**
2562 * @method nodeChange
2563 * @description Handles setting up the toolbar buttons, getting the Dom path, fixing nodes.
2564 */
2571 }
2572 //Check to see if we are disabled before continuing
2575 //Reset this var for next action
2582 //Handle disabled buttons
2587 //No Selection - disable
2592 }
2593 }
2596 }
2597 }
2598 }
2599 //Handle updating the toolbar with active buttons
2603 }
2604 }
2611 }
2614 //Bold and Italic styles
2617 }
2620 }
2623 }
2629 }
2630 }
2634 }
2639 }
2640 }
2641 //Handle Alignment
2650 }
2655 }
2656 //Handle Ordered List Drop Down - it will reset if olType is null
2657 //this._updateMenuChecked('insertorderedlist', olType);
2658 }
2659 //After for loop
2661 //Reset Font Family and Size to the inital configs
2665 fn_button.set('label', '<span class="yui-toolbar-fontname-' + _cleanClassName(family) + '">' + family + '</span>');
2667 }
2672 }
2678 }
2679 }
2680 }
2683 },
2684 /**
2685 * @private
2686 * @method _updateMenuChecked
2687 * @param {Object} button The command identifier of the button you want to check
2688 * @param {String} value The value of the menu item you want to check
2689 * @param {<a href="YAHOO.widget.Toolbar.html">YAHOO.widget.Toolbar</a>} The Toolbar instance the button belongs to (defaults to this.toolbar)
2690 * @description Gets the menu from a button instance, if the menu is not rendered it will render it. It will then search the menu for the specified value, unchecking all other items and checking the specified on.
2691 */
2695 }
2701 }
2706 }
2707 }
2708 },
2709 /**
2710 * @private
2711 * @method _handleToolbarClick
2712 * @param {Event} ev The event that triggered the button click
2713 * @description This is an event handler attached to the Toolbar's buttonClick event. It will fire execCommand with the command identifier from the Toolbar Button.
2714 */
2722 }
2724 YAHOO.log('execCommand skipped because we found the STOP_EXEC_COMMAND flag set to true', 'warn', 'Editor');
2730 }
2732 },
2733 /**
2734 * @private
2735 * @method _setupAfterElement
2736 * @description Creates the accessibility h2 header and places it after the iframe in the Dom for navigation.
2737 */
2745 }
2746 },
2747 /**
2748 * @property EDITOR_PANEL_ID
2749 * @description HTML id to give the properties window in the DOM.
2750 * @type String
2751 */
2753 /**
2754 * @property SEP_DOMPATH
2755 * @description The value to place in between the Dom path items
2756 * @type String
2757 */
2759 /**
2760 * @property STR_LEAVE_EDITOR
2761 * @description The accessibility string for the element after the iFrame
2762 * @type String
2763 */
2765 /**
2766 * @property STR_BEFORE_EDITOR
2767 * @description The accessibility string for the element before the iFrame
2768 * @type String
2769 */
2770 STR_BEFORE_EDITOR: 'This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Control + Shift + T to place focus on the toolbar and navigate between option heading names. <h4>Common formatting keyboard shortcuts:</h4><ul><li>Control Shift B sets text to bold</li> <li>Control Shift I sets text to italic</li> <li>Control Shift U underlines text</li> <li>Control Shift [ aligns text left</li> <li>Control Shift | centers text</li> <li>Control Shift ] aligns text right</li> <li>Control Shift L adds an HTML link</li> <li>To exit this text editor use the keyboard shortcut Control Shift ESC.</li></ul>',
2771 /**
2772 * @property STR_CLOSE_WINDOW
2773 * @description The Title of the close button in the Editor Window
2774 * @type String
2775 */
2777 /**
2778 * @property STR_CLOSE_WINDOW_NOTE
2779 * @description A note appearing in the Editor Window to tell the user that the Escape key will close the window
2780 * @type String
2781 */
2783 /**
2784 * @property STR_TITLE
2785 * @description The Title of the HTML document that is created in the iFrame
2786 * @type String
2787 */
2789 /**
2790 * @property STR_IMAGE_HERE
2791 * @description The text to place in the URL textbox when using the blankimage.
2792 * @type String
2793 */
2795 /**
2796 * @property STR_IMAGE_PROP_TITLE
2797 * @description The title for the Image Property Editor Window
2798 * @type String
2799 */
2801 /**
2802 * @property STR_IMAGE_URL
2803 * @description The label string for Image URL
2804 * @type String
2805 */
2807 /**
2808 * @property STR_IMAGE_TITLE
2809 * @description The label string for Image Description
2810 * @type String
2811 */
2813 /**
2814 * @property STR_IMAGE_SIZE
2815 * @description The label string for Image Size
2816 * @type String
2817 */
2819 /**
2820 * @property STR_IMAGE_ORIG_SIZE
2821 * @description The label string for Original Image Size
2822 * @type String
2823 */
2825 /**
2826 * @property STR_IMAGE_COPY
2827 * @description The label string for the image copy and paste message for Opera and Safari
2828 * @type String
2829 */
2830 STR_IMAGE_COPY: '<span class="tip"><span class="icon icon-info"></span><strong>Note:</strong>To move this image just highlight it, cut, and paste where ever you\'d like.</span>',
2831 /**
2832 * @property STR_IMAGE_PADDING
2833 * @description The label string for the image padding.
2834 * @type String
2835 */
2837 /**
2838 * @property STR_IMAGE_BORDER
2839 * @description The label string for the image border.
2840 * @type String
2841 */
2843 /**
2844 * @property STR_IMAGE_TEXTFLOW
2845 * @description The label string for the image text flow.
2846 * @type String
2847 */
2849 /**
2850 * @property STR_LOCAL_FILE_WARNING
2851 * @description The label string for the local file warning.
2852 * @type String
2853 */
2854 STR_LOCAL_FILE_WARNING: '<span class="tip"><span class="icon icon-warn"></span><strong>Note:</strong>This image/link points to a file on your computer and will not be accessible to others on the internet.</span>',
2855 /**
2856 * @property STR_LINK_PROP_TITLE
2857 * @description The label string for the Link Property Editor Window.
2858 * @type String
2859 */
2861 /**
2862 * @property STR_LINK_PROP_REMOVE
2863 * @description The label string for the Remove link from text link inside the property editor.
2864 * @type String
2865 */
2867 /**
2868 * @property STR_LINK_URL
2869 * @description The label string for the Link URL.
2870 * @type String
2871 */
2873 /**
2874 * @property STR_LINK_NEW_WINDOW
2875 * @description The string for the open in a new window label.
2876 * @type String
2877 */
2879 /**
2880 * @property STR_LINK_TITLE
2881 * @description The string for the link description.
2882 * @type String
2883 */
2885 /**
2886 * @protected
2887 * @property STOP_EXEC_COMMAND
2888 * @description Set to true when you want the default execCommand function to not process anything
2889 * @type Boolean
2890 */
2892 /**
2893 * @protected
2894 * @property STOP_NODE_CHANGE
2895 * @description Set to true when you want the default nodeChange function to not process anything
2896 * @type Boolean
2897 */
2899 /**
2900 * @protected
2901 * @property CLASS_HIDDEN
2902 * @description CSS class applied to the body when the hiddenelements button is pressed.
2903 * @type String
2904 */
2906 /**
2907 * @protected
2908 * @property CLASS_LOCAL_FILE
2909 * @description CSS class applied to an element when it's found to have a local url.
2910 * @type String
2911 */
2913 /**
2914 * @protected
2915 * @property CLASS_CONTAINER
2916 * @description Default CSS class to apply to the editors container element
2917 * @type String
2918 */
2920 /**
2921 * @protected
2922 * @property CLASS_EDITABLE
2923 * @description Default CSS class to apply to the editors iframe element
2924 * @type String
2925 */
2927 /**
2928 * @protected
2929 * @property CLASS_EDITABLE_CONT
2930 * @description Default CSS class to apply to the editors iframe's parent element
2931 * @type String
2932 */
2934 /**
2935 * @protected
2936 * @property CLASS_PREFIX
2937 * @description Default prefix for dynamically created class names
2938 * @type String
2939 */
2941 /**
2942 * @property browser
2943 * @description Standard browser detection
2944 * @type Object
2945 */
2947 /**
2948 * @method init
2949 * @description The Editor class' initialization method
2950 */
2956 },
2957 /**
2958 * @method initAttributes
2959 * @description Initializes all of the configuration attributes used to create
2960 * the editor.
2961 * @param {Object} attr Object literal specifying a set of
2962 * configuration attributes used to create the editor.
2963 */
2968 /**
2969 * @private
2970 * @config textarea
2971 * @description A reference to the textarea element that we are replacing
2972 * @default null
2973 * @type Boolean
2974 */
2978 });
2979 /**
2980 * @config height
2981 * @description The height of the editor iframe container, not including the toolbar..
2982 * @default Best guessed size of the textarea, for best results use CSS to style the height of the textarea or pass it in as an argument
2983 * @type String
2984 */
2988 });
2989 /**
2990 * @config width
2991 * @description The width of the editor container.
2992 * @default Best guessed size of the textarea, for best results use CSS to style the width of the textarea or pass it in as an argument
2993 * @type String
2994 */
2998 });
3000 /**
3001 * @config blankimage
3002 * @description The CSS used to show/hide hidden elements on the page
3003 * @default 'assets/blankimage.png'
3004 * @type String
3005 */
3008 });
3009 /**
3010 * @config hiddencss
3011 * @description The CSS used to show/hide hidden elements on the page, these rules must be prefixed with the class provided in <code>this.CLASS_HIDDEN</code>
3012 * @default <code><pre>
3013 .hidden div, .hidden p, .hidden span, .hidden img {
3014 border: 1px dotted #ccc;
3015 }
3016 .hidden .yui-non {
3017 border: none;
3018 }
3019 .hidden img {
3020 padding: 2px;
3021 }</pre></code>
3022 * @type String
3023 */
3025 value: attr.hiddencss || '.hidden div,.hidden p,.hidden span,.hidden img { border: 1px dotted #ccc; } .hidden .yui-non { border: none; } .hidden img { padding: 2px; }',
3027 });
3028 /**
3029 * @config css
3030 * @description The Base CSS used to format the content of the editor
3031 * @default <code><pre>body {
3032 padding: 7px; background-color: #fff; font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;
3033 }
3034 span.yui-tag-a {
3035 color: blue; text-decoration: underline;
3036 }
3037 span.yui-tag-blockquote {
3038 margin: 1em; display: block;
3039 }
3040 span.yui-tag-indent {
3041 margin-left: 1em; display: block;
3042 }
3043 .warning-localfile {
3044 border-bottom: 1px dashed red !important;
3045 }</pre></code>
3046 * @type String
3047 */
3049 value: attr.css || 'body { padding: 7px; background-color: #fff; font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; } span.yui-tag-a { color: blue; text-decoration: underline; } span.yui-tag-blockquote { margin: 1em; display: block; } span.yui-tag-indent { margin-left: 1em; display: block; } .warning-localfile { border-bottom: 1px dashed red !important; }',
3051 });
3052 /**
3053 * @config html
3054 * @description The default HTML to be written to the iframe document before the contents are loaded
3055 * @default This HTML requires a few things if you are to override:
3056 <p><code>{TITLE}, {CSS}, {HIDDEN_CSS}</code> and <code>{CONTENT}</code> need to be there, they are passed to YAHOO.lang.substitute to be replace with other strings.<p>
3057 <p><code>onload="document.body._rteLoaded = true;"</code> : the onload statement must be there or the editor will not finish loading.</p>
3058 <code>
3059 <pre>
3060 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3061 <html>
3062 <head>
3063 <title>{TITLE}</title>
3064 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
3065 <style>
3066 {CSS}
3067 </style>
3068 <style>
3069 {HIDDEN_CSS}
3070 </style>
3071 </head>
3072 <body onload="document.body._rteLoaded = true;">
3073 {CONTENT}
3074 </body>
3075 </html>
3076 </pre>
3077 </code>
3078 * @type String
3079 */
3081 value: attr.html || '<!DOCTYPE HTML PUBLIC "-/'+'/W3C/'+'/DTD HTML 4.01/'+'/EN" "http:/'+'/www.w3.org/TR/html4/strict.dtd"><html><head><title>{TITLE}</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style>{CSS}</style><style>{HIDDEN_CSS}</style></head><body onload="document.body._rteLoaded = true;">{CONTENT}</body></html>',
3083 });
3085 /**
3086 * @config handleSubmit
3087 * @description Config handles if the editor will attach itself to the textareas parent form's submit handler.
3088 If it is set to true, the editor will attempt to attach a submit listener to the textareas parent form.
3089 Then it will trigger the editors save handler and place the new content back into the text area before the form is submitted.
3090 * @default false
3091 * @type Boolean
3092 */
3103 }
3104 }
3105 }
3106 });
3107 /**
3108 * @private
3109 * @config iframe
3110 * @description Internal config for holding the iframe element.
3111 * @default null
3112 * @type Boolean
3113 */
3117 });
3118 /**
3119 * @config disabled
3120 * @description This will toggle the editor's disabled state. When the editor is disabled, designMode is turned off and a mask is placed over the iframe so no interaction can take place.
3121 All Toolbar buttons are also disabled so they cannot be used.
3122 * @default false
3123 * @type Boolean
3124 */
3142 }
3150 }
3151 }
3152 }
3153 });
3154 /**
3155 * @config element_cont
3156 * @description Internal config for the editors container
3157 * @default false
3158 * @type Boolean
3159 */
3163 });
3164 /**
3165 * @config toolbar_cont
3166 * @description Internal config for the toolbars container
3167 * @default false
3168 * @type Boolean
3169 */
3173 });
3174 /**
3175 * @config toolbar
3176 * @description The default toolbar config.
3177 * @default This config is too large to display here, view the code to see it: <a href="editor.js.html"></a>
3178 * @type Object
3179 */
3182 /* {{{ Defaut Toolbar Config */
3186 buttons: [
3188 buttons: [
3190 menu: [
3200 ]
3201 },
3203 ]
3204 },
3207 buttons: [
3220 ]
3221 },
3224 buttons: [
3229 ]
3230 },
3233 buttons: [
3235 menu: [
3243 ]
3244 }
3245 ]
3246 },
3249 buttons: [
3254 /*
3255 { type: 'menu', label: 'Create an Ordered List', value: 'insertorderedlist',
3256 menu: [
3257 { text: '1,2,3,4', value: '1', checked: true },
3258 { text: 'A,B,C,D', value: 'A' },
3259 { text: 'a,b,c,d', value: 'a' },
3260 { text: 'I,II,III,IV', value: 'I' },
3261 { text: 'i,ii,iii,iv', value: 'i' }
3262 ]
3263 }
3264 */
3265 ]
3266 },
3269 buttons: [
3272 ]
3273 }
3274 ]
3275 /* }}} */
3276 },
3279 }
3280 });
3281 /**
3282 * @config animate
3283 * @description Should the editor animate window movements
3284 * @default false unless Animation is found, then true
3285 * @type Boolean
3286 */
3293 }
3295 }
3296 });
3297 /**
3298 * @config panel
3299 * @description A reference to the panel we are using for windows.
3300 * @default false
3301 * @type Boolean
3302 */
3310 }
3312 }
3313 });
3314 /**
3315 * @config localFileWarning
3316 * @description Should we throw the warning if we detect a file that is local to their machine?
3317 * @default true
3318 * @type Boolean
3319 */
3322 });
3323 /**
3324 * @config dompath
3325 * @description Toggle the display of the current Dom path below the editor
3326 * @default false
3327 * @type Boolean
3328 */
3339 }
3343 }
3345 }
3346 });
3347 /**
3348 * @config markup
3349 * @description Should we try to adjust the markup for the following types: semantic, css or default
3350 * @default "semantic"
3351 * @type Boolean
3352 */
3362 }
3364 }
3365 });
3369 });
3370 },
3371 /**
3372 * @private
3373 * @method _getBlankImage
3374 * @description Retrieves the full url of the image to use as the blank image.
3375 * @returns {String} The URL to the blank image
3376 */
3381 }
3390 this.set('blankimage', img);
3391 return img;
3392 },
3393 /**
3394 * @private
3395 * @method _handleFontSize
3396 * @description Handles the font size button in the toolbar.
3397 * @param {Object} o Object returned from Toolbar's buttonClick Event
3398 */
3399 _handleFontSize: function(o) {
3400 var button = this.toolbar.getButtonById(o.button.id);
3401 var value = button.get('label') + 'px';
3402 this.execCommand('fontsize', value);
3403 this.STOP_EXEC_COMMAND = true;
3404 },
3405 /**
3406 * @private
3407 * @method _handleColorPicker
3408 * @description Handles the colorpicker buttons in the toolbar.
3409 * @param {Object} o Object returned from Toolbar's buttonClick Event
3410 */
3411 _handleColorPicker: function(o) {
3412 var cmd = o.button;
3413 var value = '#' + o.color;
3414 if ((cmd == 'forecolor') || (cmd == 'backcolor')) {
3415 this.execCommand(cmd, value);
3416 }
3417 },
3418 /**
3419 * @private
3420 * @method _handleAlign
3421 * @description Handles the alignment buttons in the toolbar.
3422 * @param {Object} o Object returned from Toolbar's buttonClick Event
3423 */
3424 _handleAlign: function(o) {
3425 var button = this.toolbar.getButtonById(o.button.id);
3426 var cmd = null;
3427 for (var i = 0; i < o.button.menu.length; i++) {
3428 if (o.button.menu[i].value == o.button.value) {
3429 cmd = o.button.menu[i].value;
3430 }
3431 }
3432 var value = this._getSelection();
3434 this.execCommand(cmd, value);
3435 this.STOP_EXEC_COMMAND = true;
3436 },
3437 /**
3438 * @private
3439 * @method _handleAfterNodeChange
3440 * @description Fires after a nodeChange happens to setup the things that where reset on the node change (button state).
3441 */
3442 _handleAfterNodeChange: function() {
3443 var path = this._getDomPath();
3444 for (var i = 0; i < path.length; i++) {
3445 var elm = path[i],
3446 tag = elm.tagName.toLowerCase(),
3447 family = null,
3448 fontsize = null,
3449 validFont = false;
3451 if (elm.getAttribute('tag')) {
3452 tag = elm.getAttribute('tag');
3453 }
3455 family = elm.getAttribute('face');
3456 if (Dom.getStyle(elm, 'font-family')) {
3457 family = Dom.getStyle(elm, 'font-family');
3458 }
3459 var fn_button = this.toolbar.getButtonByValue('fontname');
3460 if (fn_button) {
3461 for (var b = 0; b < fn_button._configs.menu.value.length; b++) {
3462 if (family && fn_button._configs.menu.value[b].text.toLowerCase() == family.toLowerCase()) {
3463 validFont = true;
3464 family = fn_button._configs.menu.value[b].text; //Put the proper menu name in the button
3465 }
3466 }
3467 if (!validFont) {
3468 family = fn_button._configs.label._initialConfig.value;
3469 }
3470 fn_button.set('label', '<span class="yui-toolbar-fontname-' + _cleanClassName(family) + '">' + family + '</span>');
3471 this._updateMenuChecked('fontname', family);
3472 }
3474 var fs_button = this.toolbar.getButtonByValue('fontsize');
3475 if (fs_button) {
3476 fontsize = parseInt(Dom.getStyle(elm, 'fontSize'));
3477 if ((fontsize == null) || isNaN(fontsize)) {
3478 fontsize = fs_button._configs.label._initialConfig.value;
3479 }
3480 fs_button.set('label', ''+fontsize);
3481 }
3483 if (tag.substring(0, 1) == 'h') {
3484 var hd_button = this.toolbar.getButtonByValue('heading');
3485 if (hd_button) {
3486 for (var b = 0; b < hd_button._configs.menu.value.length; b++) {
3487 if (hd_button._configs.menu.value[b].value.toLowerCase() == tag) {
3488 hd_button.set('label', hd_button._configs.menu.value[b].text);
3489 }
3490 }
3491 this._updateMenuChecked('heading', tag);
3492 }
3493 }
3494 }
3496 if (elm && elm.tagName && (elm.tagName.toLowerCase() != 'body')) {
3497 this.toolbar.enableButton(fn_button);
3498 this.toolbar.enableButton(fs_button);
3499 }
3501 },
3502 /**
3503 * @private
3504 * @method _handleInsertImageClick
3505 * @description Opens the Image Properties Window when the insert Image button is clicked or an Image is Double Clicked.
3506 */
3507 _handleInsertImageClick: function() {
3508 //this.toolbar.disableButton(this.toolbar.getButtonByValue('insertimage'));
3509 this.on('afterExecCommand', function() {
3510 var el = this.currentElement[0],
3511 title = '',
3512 src = '',
3513 align = '',
3514 height = 75,
3515 width = 75,
3516 padding = 0,
3517 blankimage = false,
3518 win = new YAHOO.widget.EditorWindow('insertimage', {
3519 width: '415px'
3520 });
3522 if (!el) {
3523 el = this._getSelectedElement();
3524 }
3525 if (el) {
3526 if (el.getAttribute('src')) {
3527 src = el.getAttribute('src', 2);
3528 if (src.indexOf(this.get('blankimage')) != -1) {
3529 src = this.STR_IMAGE_HERE;
3530 blankimage = true;
3531 }
3532 }
3533 if (el.getAttribute('alt', 2)) {
3534 title = el.getAttribute('alt', 2);
3535 }
3536 if (el.getAttribute('title', 2)) {
3537 title = el.getAttribute('title', 2);
3538 }
3539 height = parseInt(el.height);
3540 width = parseInt(el.width);
3541 if (el.style.height) {
3542 height = parseInt(el.style.height);
3543 }
3544 if (el.style.width) {
3545 width = parseInt(el.style.width);
3546 }
3547 if (el.style.margin) {
3548 padding = parseInt(el.style.margin);
3549 }
3550 if (!el._height) {
3551 el._height = height;
3552 }
3553 if (!el._width) {
3554 el._width = width;
3555 }
3556 var oheight = el._height;
3557 var owidth = el._width;
3558 }
3559 if (!win.cache) {
3560 var str = '<label for="insertimage_url"><strong>' + this.STR_IMAGE_URL + ':</strong> <input type="text" id="insertimage_url" value="' + src + '" size="40"></label>';
3561 var body = document.createElement('div');
3562 body.innerHTML = str;
3564 var tbarCont = document.createElement('div');
3565 tbarCont.id = 'img_toolbar';
3566 body.appendChild(tbarCont);
3568 var str2 = '<label for="insertimage_title"><strong>' + this.STR_IMAGE_TITLE + ':</strong> <input type="text" id="insertimage_title" value="' + title + '" size="40"></label>';
3569 var div = document.createElement('div');
3570 div.innerHTML = str2;
3571 body.appendChild(div);
3572 win.cache = body;
3573 } else {
3574 body = win.cache;
3575 }
3577 var tbar = new YAHOO.widget.Toolbar(tbarCont, {
3578 /* {{{ */
3579 buttons: [
3580 { group: 'padding', label: this.STR_IMAGE_PADDING + ':',
3581 buttons: [
3582 { type: 'spin', label: ''+padding, value: 'padding', range: [0, 50] }
3583 ]
3584 },
3585 { type: 'separator' },
3586 { group: 'border', label: this.STR_IMAGE_BORDER + ':',
3587 buttons: [
3588 { type: 'select', label: 'Border Size', value: 'bordersize',
3589 menu: [
3590 { text: 'none', value: '0', checked: true },
3591 { text: '----', value: '1' },
3592 { text: '----', value: '2' },
3593 { text: '----', value: '3' },
3594 { text: '----', value: '4' },
3595 { text: '----', value: '5' }
3596 ]
3597 },
3598 { type: 'select', label: 'Border Type', value: 'bordertype', disabled: true,
3599 menu: [
3600 { text: '----', value: 'solid', checked: true },
3601 { text: '----', value: 'dashed' },
3602 { text: '----', value: 'dotted' }
3603 ]
3604 },
3605 { type: 'color', label: 'Border Color', value: 'bordercolor', disabled: true }
3606 ]
3607 },
3608 { type: 'separator' },
3609 { group: 'textflow', label: this.STR_IMAGE_TEXTFLOW + ':',
3610 buttons: [
3611 { type: 'push', label: 'Left', value: 'left' },
3612 { type: 'push', label: 'Inline', value: 'inline' },
3613 { type: 'push', label: 'Block', value: 'block' },
3614 { type: 'push', label: 'Right', value: 'right' }
3615 ]
3616 }
3617 ]
3618 /* }}} */
3619 });
3621 var bsize = '0';
3622 var btype = 'solid';
3623 if (el.style.borderLeftWidth) {
3624 bsize = parseInt(el.style.borderLeftWidth);
3625 }
3626 if (el.style.borderLeftStyle) {
3627 btype = el.style.borderLeftStyle;
3628 }
3629 var bs_button = tbar.getButtonByValue('bordersize');
3630 var bSizeStr = ((parseInt(bsize) > 0) ? '----' : 'none');
3631 bs_button.set('label', '<span class="yui-toolbar-bordersize-' + bsize + '">'+bSizeStr+'</span>');
3632 this._updateMenuChecked('bordersize', bsize, tbar);
3634 var bs_button = tbar.getButtonByValue('bordertype');
3636 this._updateMenuChecked('bordertype', btype, tbar);
3637 if (parseInt(bsize) > 0) {
3638 tbar.enableButton(tbar.getButtonByValue('bordertype'));
3639 tbar.enableButton(tbar.getButtonByValue('bordercolor'));
3640 }
3642 var cont = tbar.get('cont');
3643 var hw = document.createElement('div');
3644 hw.className = 'yui-toolbar-group yui-toolbar-group-padding height-width';
3645 hw.innerHTML = '<h3>' + this.STR_IMAGE_SIZE + ':</h3>';
3646 var orgSize = '';
3647 if ((height != oheight) || (width != owidth)) {
3648 orgSize = '<span class="info">' + this.STR_IMAGE_ORIG_SIZE + '<br>'+ owidth +' x ' + oheight + '</span>';
3649 }
3650 hw.innerHTML += '<span><input type="text" size="3" value="'+width+'" id="insertimage_width"> x <input type="text" size="3" value="'+height+'" id="insertimage_height"></span>' + orgSize;
3651 cont.insertBefore(hw, cont.firstChild);
3653 Event.onAvailable('insertimage_width', function() {
3654 Event.on('insertimage_width', 'blur', function() {
3655 var value = parseInt(Dom.get('insertimage_width').value);
3656 if (value > 5) {
3657 el.style.width = value + 'px';
3658 this.moveWindow();
3659 }
3660 }, this, true);
3661 }, this, true);
3662 Event.onAvailable('insertimage_height', function() {
3663 Event.on('insertimage_height', 'blur', function() {
3664 var value = parseInt(Dom.get('insertimage_height').value);
3665 if (value > 5) {
3666 el.style.height = value + 'px';
3667 this.moveWindow();
3668 }
3669 }, this, true);
3670 }, this, true);
3672 if (el.align == 'right') {
3673 tbar.selectButton(tbar.getButtonByValue('right'));
3674 } else if (el.align == 'left') {
3675 tbar.selectButton(tbar.getButtonByValue('left'));
3676 } else if (el.style.display == 'block') {
3677 tbar.selectButton(tbar.getButtonByValue('block'));
3678 } else {
3679 tbar.selectButton(tbar.getButtonByValue('inline'));
3680 }
3681 if (parseInt(el.style.marginLeft) > 0) {
3682 tbar.getButtonByValue('padding').set('label', ''+parseInt(el.style.marginLeft));
3683 }
3684 if (el.style.borderSize) {
3685 tbar.selectButton(tbar.getButtonByValue('bordersize'));
3686 tbar.selectButton(tbar.getButtonByValue(parseInt(el.style.borderSize)));
3687 }
3689 tbar.on('colorPickerClicked', function(o) {
3690 var size = '1', type = 'solid', color = 'black';
3692 if (el.style.borderLeftWidth) {
3693 size = parseInt(el.style.borderLeftWidth);
3694 }
3695 if (el.style.borderLeftStyle) {
3696 type = el.style.borderLeftStyle;
3697 }
3698 if (el.style.borderLeftColor) {
3699 color = el.style.borderLeftColor;
3700 }
3701 var borderString = size + 'px ' + type + ' #' + o.color;
3702 el.style.border = borderString;
3703 }, this.toolbar, true);
3705 tbar.on('buttonClick', function(o) {
3706 var value = o.button.value;
3707 if (o.button.menucmd) {
3708 value = o.button.menucmd
3709 }
3710 var size = '1', type = 'solid', color = 'black';
3712 /* All border calcs are done on the left border
3713 since our default interface only supports
3714 one border size/type and color */
3715 if (el.style.borderLeftWidth) {
3716 size = parseInt(el.style.borderLeftWidth);
3717 }
3718 if (el.style.borderLeftStyle) {
3719 type = el.style.borderLeftStyle;
3720 }
3721 if (el.style.borderLeftColor) {
3722 color = el.style.borderLeftColor;
3723 }
3724 switch(value) {
3725 case 'bordersize':
3726 var borderString = parseInt(o.button.value) + 'px ' + type + ' ' + color;
3727 el.style.border = borderString;
3728 if (parseInt(o.button.value) > 0) {
3729 tbar.enableButton(tbar.getButtonByValue('bordertype'));
3730 tbar.enableButton(tbar.getButtonByValue('bordercolor'));
3731 } else {
3732 tbar.disableButton(tbar.getButtonByValue('bordertype'));
3733 tbar.disableButton(tbar.getButtonByValue('bordercolor'));
3734 }
3735 break;
3736 case 'bordertype':
3737 var borderString = size + 'px ' + o.button.value + ' ' + color;
3738 el.style.border = borderString;
3739 break;
3740 case 'right':
3741 case 'left':
3742 tbar.deselectAllButtons();
3743 el.style.display = '';
3744 el.align = o.button.value;
3745 break;
3746 case 'inline':
3747 tbar.deselectAllButtons();
3748 el.style.display = '';
3749 el.align = '';
3750 break;
3751 case 'block':
3752 tbar.deselectAllButtons();
3753 el.style.display = 'block';
3754 el.align = 'center';
3755 break;
3756 case 'padding':
3757 var _button = tbar.getButtonById(o.button.id);
3758 el.style.margin = _button.get('label') + 'px';
3759 break;
3760 }
3761 tbar.selectButton(tbar.getButtonByValue(o.button.value));
3762 this.moveWindow();
3763 }, this, true);
3765 win.setHeader(this.STR_IMAGE_PROP_TITLE);
3766 win.setBody(body);
3767 if ((this.browser.webkit && !this.browser.webkit3) || this.browser.opera) {
3768 var str = this.STR_IMAGE_COPY;
3769 win.setFooter(str);
3770 }
3771 this.openWindow(win);
3774 //Set event after openWindow..
3775 Event.onAvailable('insertimage_url', function() {
3776 window.setTimeout(function() {
3777 YAHOO.util.Dom.get('insertimage_url').focus();
3778 if (blankimage) {
3779 YAHOO.util.Dom.get('insertimage_url').select();
3780 }
3781 }, 50);
3783 if (this.get('localFileWarning')) {
3784 Event.on('insertimage_url', 'blur', function() {
3785 var url = Dom.get('insertimage_url');
3786 if ((url.value != '') && ((url.value.indexOf('file:/') != -1) || (url.value.indexOf(':\\') != -1))) {
3787 //Local File throw Warning
3788 Dom.addClass(url, 'warning');
3789 YAHOO.log('Local file reference found, show local warning', 'warn', 'Editor');
3790 var str = this.STR_LOCAL_FILE_WARNING;
3791 this.get('panel').setFooter(str);
3792 } else {
3793 Dom.removeClass(url, 'warning');
3794 this.get('panel').setFooter(' ');
3795 if ((this.browser.webkit && !this.browser.webkit3) || this.browser.opera) {
3796 var str = this.STR_IMAGE_COPY;
3797 this.get('panel').setFooter(str);
3798 }
3800 if (url && url.value && (url.value != this.STR_IMAGE_HERE)) {
3801 this.currentElement[0].setAttribute('src', url.value);
3802 var img = new Image();
3803 var self = this;
3804 window.setTimeout(function() {
3805 YAHOO.util.Dom.get('insertimage_height').value = img.height;
3806 YAHOO.util.Dom.get('insertimage_width').value = img.width;
3807 if (!self.currentElement[0]._height) {
3808 self.currentElement[0]._height = img.height;
3809 }
3810 if (!self.currentElement[0]._width) {
3811 self.currentElement[0]._width = img.width;
3812 }
3813 self.moveWindow();
3814 }, 200);
3816 img.src = url.value;
3817 }
3818 }
3819 }, this, true);
3820 }
3821 }, this, true);
3822 });
3823 },
3824 /**
3825 * @private
3826 * @method _handleInsertImageWindowClose
3827 * @description Handles the closing of the Image Properties Window.
3828 */
3829 _handleInsertImageWindowClose: function() {
3830 var url = Dom.get('insertimage_url');
3831 var title = Dom.get('insertimage_title');
3832 var el = this.currentElement[0];
3833 if (url && url.value && (url.value != this.STR_IMAGE_HERE)) {
3834 el.setAttribute('src', url.value);
3835 el.setAttribute('title', title.value);
3836 el.setAttribute('alt', title.value);
3837 //this.toolbar.enableButton(this.toolbar.getButtonByValue('insertimage'));
3838 } else {
3839 //No url/src given, remove the node from the document
3840 el.parentNode.removeChild(el);
3841 }
3842 },
3843 /**
3844 * @private
3845 * @method _handleCreateLinkClick
3846 * @description Handles the opening of the Link Properties Window when the Create Link button is clicked or an href is doubleclicked.
3847 */
3848 _handleCreateLinkClick: function() {
3849 this.on('afterExecCommand', function() {
3851 var win = new YAHOO.widget.EditorWindow('createlink', {
3852 width: '300px'
3853 });
3855 var el = this.currentElement[0],
3856 url = '',
3857 title = '',
3858 target = '',
3859 localFile = false;
3860 if (el) {
3861 if (el.getAttribute('href') != null) {
3862 url = el.getAttribute('href');
3864 //Local File throw Warning
3865 YAHOO.log('Local file reference found, show local warning', 'warn', 'Editor');
3866 var str = this.STR_LOCAL_FILE_WARNING;
3867 win.setFooter(str);
3868 localFile = true;
3869 } else {
3870 win.setFooter(' ');
3871 }
3872 }
3873 if (el.getAttribute('title') != null) {
3874 title = el.getAttribute('title');
3875 }
3876 if (el.getAttribute('target') != null) {
3877 target = el.getAttribute('target');
3878 }
3879 }
3880 var str = '<label for="createlink_url"><strong>' + this.STR_LINK_URL + ':</strong> <input type="text" name="createlink_url" id="createlink_url" value="' + url + '"' + ((localFile) ? ' class="warning"' : '') + '></label>';
3881 str += '<label for="createlink_target"><strong> </strong><input type="checkbox" name="createlink_target_" id="createlink_target" value="_blank"' + ((target) ? ' checked' : '') + '> ' + this.STR_LINK_NEW_WINDOW + '</label>';
3882 str += '<label for="createlink_title"><strong>' + this.STR_LINK_TITLE + ':</strong> <input type="text" name="createlink_title" id="createlink_title" value="' + title + '"></label>';
3884 var body = document.createElement('div');
3885 body.innerHTML = str;
3887 var unlinkCont = document.createElement('div');
3888 unlinkCont.className = 'removeLink';
3889 var unlink = document.createElement('a');
3890 unlink.href = '#';
3891 unlink.innerHTML = this.STR_LINK_PROP_REMOVE;
3892 unlink.title = this.STR_LINK_PROP_REMOVE;
3893 Event.on(unlink, 'click', function(ev) {
3894 Event.stopEvent(ev);
3895 this.execCommand('unlink');
3896 this.closeWindow();
3897 }, this, true);
3898 unlinkCont.appendChild(unlink);
3899 body.appendChild(unlinkCont);
3901 win.setHeader(this.STR_LINK_PROP_TITLE);
3902 win.setBody(body);
3904 Event.onAvailable('createlink_url', function() {
3905 window.setTimeout(function() {
3906 try {
3907 YAHOO.util.Dom.get('createlink_url').focus();
3908 } catch (e) {}
3909 }, 50);
3910 Event.on('createlink_url', 'blur', function() {
3911 var url = Dom.get('createlink_url');
3912 if ((url.value != '') && ((url.value.indexOf('file:/') != -1) || (url.value.indexOf(':\\') != -1))) {
3913 //Local File throw Warning
3914 Dom.addClass(url, 'warning');
3915 YAHOO.log('Local file reference found, show local warning', 'warn', 'Editor');
3916 var str = this.STR_LOCAL_FILE_WARNING;
3917 this.get('panel').setFooter(str);
3918 } else {
3919 Dom.removeClass(url, 'warning');
3920 this.get('panel').setFooter(' ');
3921 }
3922 }, this, true);
3923 }, this, true);
3925 this.openWindow(win);
3926 });
3927 },
3928 /**
3929 * @private
3930 * @method _handleCreateLinkWindowClose
3931 * @description Handles the closing of the Link Properties Window.
3932 */
3933 _handleCreateLinkWindowClose: function() {
3934 var url = Dom.get('createlink_url');
3935 var target = Dom.get('createlink_target');
3936 var title = Dom.get('createlink_title');
3937 var el = this.currentElement[0];
3938 if (url && url.value) {
3939 var urlValue = url.value;
3940 if ((urlValue.indexOf(':/'+'/') == -1) && (urlValue.substring(0,1) != '/') && (urlValue.substring(0, 6).toLowerCase() != 'mailto')) {
3941 if ((urlValue.indexOf('@') != -1) && (urlValue.substring(0, 6).toLowerCase() != 'mailto')) {
3942 //Found an @ sign, prefix with mailto:
3943 urlValue = 'mailto:' + urlValue;
3944 } else {
3945 /* :// not found adding */
3946 urlValue = 'http:/'+'/' + urlValue;
3947 }
3948 }
3949 el.setAttribute('href', urlValue);
3950 if (target.checked) {
3951 el.setAttribute('target', target.value);
3952 } else {
3953 el.setAttribute('target', '');
3954 }
3955 el.setAttribute('title', ((title.value) ? title.value : ''));
3957 } else {
3958 el.removeAttribute('tag');
3959 Dom.removeClass(el, 'yui-tag-a');
3960 Dom.removeClass(el, 'yui-tag');
3961 Dom.addClass(el, 'yui-non');
3962 }
3963 this.nodeChange();
3964 },
3965 /**
3966 * @method render
3967 * @description Causes the toolbar and the editor to render and replace the textarea.
3968 */
3969 render: function() {
3970 if (!this.DOMReady) {
3971 this._queue[this._queue.length] = ['render', arguments];
3972 return false;
3973 }
3974 var self = this;
3975 var tbarConf = this.get('toolbar');
3976 //Set the toolbar to disabled until content is loaded
3977 tbarConf.disabled = true;
3978 //Create Toolbar instance
3979 this.toolbar = new Toolbar(this.get('toolbar_cont'), tbarConf);
3980 YAHOO.log('fireEvent::toolbarLoaded', 'info', 'Editor');
3981 this.fireEvent('toolbarLoaded', { type: 'toolbarLoaded', target: this.toolbar });
3984 this.toolbar.on('toolbarCollapsed', function() {
3985 if (this.currentWindow) {
3986 this.moveWindow();
3987 }
3988 }, this, true);
3989 this.toolbar.on('toolbarExpanded', function() {
3990 if (this.currentWindow) {
3991 this.moveWindow();
3992 }
3993 }, this, true);
3994 this.toolbar.on('fontsizeClick', function(o) {
3995 this._handleFontSize(o);
3996 }, this, true);
3998 this.toolbar.on('colorPickerClicked', function(o) {
3999 this._handleColorPicker(o);
4000 }, this, true);
4002 this.toolbar.on('alignClick', function(o) {
4003 this._handleAlign(o);
4004 }, this, true);
4005 this.on('afterNodeChange', function() {
4006 this._handleAfterNodeChange();
4007 }, this, true);
4008 this.toolbar.on('insertimageClick', function() {
4009 this._handleInsertImageClick();
4010 }, this, true);
4011 this.on('windowinsertimageClose', function() {
4012 this._handleInsertImageWindowClose();
4013 }, this, true);
4014 this.toolbar.on('createlinkClick', function() {
4015 this._handleCreateLinkClick();
4016 }, this, true);
4017 this.on('windowcreatelinkClose', function() {
4018 this._handleCreateLinkWindowClose();
4019 }, this, true);
4022 //Replace Textarea with editable area
4024 this.get('parentNode').replaceChild(this.get('element_cont').get('element'), this.get('element'));
4027 if (!this.beforeElement) {
4028 this.beforeElement = document.createElement('h2');
4029 this.beforeElement.className = 'yui-editor-skipheader';
4030 this.beforeElement.tabIndex = '-1';
4031 this.beforeElement.innerHTML = this.STR_BEFORE_EDITOR;
4032 this.get('element_cont').get('firstChild').insertBefore(this.beforeElement, this.toolbar.get('nextSibling'));
4033 }
4035 Dom.setStyle(this.get('textarea'), 'display', 'none');
4036 this.get('element_cont').appendChild(this.get('element'));
4037 this.get('element_cont').setStyle('display', 'block');
4040 //Set height and width of editor container
4041 this.get('element_cont').setStyle('width', this.get('width'));
4042 Dom.setStyle(this.get('iframe').get('parentNode'), 'height', this.get('height'));
4044 this.get('iframe').setStyle('width', '100%'); //WIDTH
4045 //this.get('iframe').setStyle('_width', '99%'); //WIDTH
4046 this.get('iframe').setStyle('height', '100%');
4049 var self = this;
4050 window.setTimeout(function() {
4051 self._setInitialContent.call(self);
4052 }, 10);
4054 this.fireEvent('afterRender', { type: 'afterRender', target: this });
4055 },
4056 /**
4057 * @method execCommand
4058 * @param {String} action The "execCommand" action to try to execute (Example: bold, insertimage, inserthtml)
4059 * @param {String} value (optional) The value for a given action such as action: fontname value: 'Verdana'
4060 * @description This method attempts to try and level the differences in the various browsers and their support for execCommand actions
4061 */
4062 execCommand: function(action, value) {
4063 this.fireEvent('beforeExecCommand', { type: 'beforeExecCommand', target: this, args: arguments });
4064 if (this.STOP_EXEC_COMMAND) {
4065 this.STOP_EXEC_COMMAND = false;
4066 return false;
4067 }
4068 this._setMarkupType(action);
4069 if (this.browser.ie) {
4070 this._getWindow().focus();
4071 }
4072 var exec = true;
4073 var _sel = this._getSelection();
4074 var _range = this._getRange();
4075 var _selEl = this._getSelectedElement();
4076 if (_selEl) {
4077 _sel = _selEl;
4078 }
4079 switch (action.toLowerCase()) {
4080 case 'heading':
4081 if (this.browser.ie) {
4082 action = 'formatblock';
4083 }
4084 if (value == 'none') {
4085 if ((_sel && _sel.tagName && (_sel.tagName.toLowerCase().substring(0,1) == 'h')) || (_sel && _sel.parentNode && _sel.parentNode.tagName && (_sel.parentNode.tagName.toLowerCase().substring(0,1) == 'h'))) {
4086 if (_sel.parentNode.tagName.toLowerCase().substring(0,1) == 'h') {
4087 _sel = _sel.parentNode;
4088 }
4089 var _span = this._getDoc().createElement('span');
4090 _span.className = 'yui-non';
4091 _span.innerHTML = _sel.innerHTML;
4092 _sel.parentNode.replaceChild(_span, _sel);
4093 }
4094 exec = false;
4095 } else {
4096 if (this.browser.ie || this.browser.webkit || this.browser.opera) {
4097 this._createCurrentElement(value);
4098 exec = false;
4099 }
4100 }
4101 break;
4102 case 'backcolor':
4103 if (this.browser.gecko || this.browser.opera) {
4104 this._setEditorStyle(true);
4105 action = 'hilitecolor';
4106 }
4107 break;
4108 case 'hiddenelements':
4109 this._showHidden();
4110 exec = false;
4111 break;
4112 case 'unlink':
4113 //var el = this._getSelectedElement();
4114 var el = this.currentElement[0];
4115 el.removeAttribute('title');
4116 el.removeAttribute('tag');
4117 el.removeAttribute('target');
4118 el.removeAttribute('href');
4119 YAHOO.util.Dom.addClass(el, 'yui-non');
4120 YAHOO.util.Dom.removeClass(el, 'yui-tag-a');
4121 YAHOO.util.Dom.removeClass(el, 'yui-tag');
4122 exec = false;
4123 break;
4124 case 'createlink':
4125 var el = this._getSelectedElement();
4126 if (!el || (el.getAttribute('tag') != 'a')) {
4127 this._createCurrentElement('a');
4128 } else {
4129 this.currentElement[0] = el;
4130 }
4131 exec = false;
4132 break;
4133 case 'insertimage':
4134 if (value == '') {
4135 value = this.get('blankimage');
4136 }
4137 /**
4138 * @knownissue
4139 * @browser Safari 2.x
4140 * @description The issue here is that we have no way of knowing where the cursor position is
4141 * inside of the iframe, so we have to place the newly inserted data in the best place that we can.
4142 */
4144 var el = this._getSelectedElement();
4146 if (el && el.tagName && (el.tagName.toLowerCase() == 'img')) {
4147 this.currentElement[0] = el;
4148 exec = false;
4149 } else {
4150 if (this._getDoc().queryCommandEnabled(action)) {
4151 this._getDoc().execCommand('insertimage', false, value);
4152 var imgs = this._getDoc().getElementsByTagName('img');
4153 for (var i = 0; i < imgs.length; i++) {
4154 if (!YAHOO.util.Dom.hasClass(imgs[i], 'yui-img')) {
4155 YAHOO.util.Dom.addClass(imgs[i], 'yui-img');
4156 this.currentElement[0] = imgs[i];
4157 }
4158 }
4159 exec = false;
4160 } else {
4161 this._createCurrentElement('img');
4162 var _img = this._getDoc().createElement('img');
4163 _img.setAttribute('src', value);
4164 YAHOO.util.Dom.addClass(_img, 'yui-img');
4165 this.currentElement[0].parentNode.replaceChild(_img, this.currentElement[0]);
4166 this.currentElement[0] = _img;
4167 exec = false;
4168 }
4169 }
4171 break;
4172 case 'inserthtml':
4173 /**
4174 * @knownissue
4175 * @browser Safari 2.x
4176 * @description The issue here is that we have no way of knowing where the cursor position is
4177 * inside of the iframe, so we have to place the newly inserted data in the best place that we can.
4178 */
4179 if (this.browser.webkit && !this._getDoc().queryCommandEnabled(action)) {
4180 YAHOO.log('More Safari DOM tricks (inserthtml)', 'info', 'EditorSafari');
4181 this._createCurrentElement('img');
4182 var _span = this._getDoc().createElement('span');
4183 _span.innerHTML = value;
4184 this.currentElement[0].parentNode.replaceChild(_span, this.currentElement[0]);
4185 exec = false;
4186 } else if (this.browser.ie) {
4187 var _range = this._getRange();
4188 if (_range.item) {
4189 _range.item(0).outerHTML = value;
4190 } else {
4191 _range.pasteHTML(value);
4192 }
4193 exec = false;
4194 }
4195 break;
4196 case 'removeformat':
4197 /**
4198 * @knownissue Remove Format issue
4199 * @browser Safari 2.x
4200 * @description There is an issue here with Safari, that it may not always remove the format of the item that is selected.
4201 * Due to the way that Safari 2.x handles ranges, it is very difficult to determine what the selection holds.
4202 * So here we are making the best possible guess and acting on it.
4203 */
4204 if (this.browser.webkit && !this._getDoc().queryCommandEnabled(action)) {
4205 this._createCurrentElement('span');
4206 YAHOO.util.Dom.addClass(this.currentElement[0], 'yui-non');
4207 var re= /<\S[^><]*>/g;
4208 var str = this.currentElement[0].innerHTML.replace(re, '');
4209 var _txt = this._getDoc().createTextNode(str);
4210 this.currentElement[0].parentNode.parentNode.replaceChild(_txt, this.currentElement[0].parentNode);
4212 exec = false;
4213 }
4214 break;
4215 case 'superscript':
4216 case 'subscript':
4217 if (this.browser.webkit) {
4218 YAHOO.log('Safari dom fun again (' + action + ')..', 'info', 'EditorSafari');
4219 var tag = action.toLowerCase().substring(0, 3);
4220 this._createCurrentElement(tag);
4221 if (this.currentElement[0].parentNode.tagName.toLowerCase() == tag) {
4222 YAHOO.log('we are a child of tag (' + tag + '), reverse process', 'info', 'EditorSafari');
4223 var span = this._getDoc().createElement('span');
4224 span.innerHTML = this.currentElement[0].innerHTML;
4225 YAHOO.util.Dom.addClass(span, 'yui-non');
4226 this.currentElement[0].parentNode.parentNode.replaceChild(span, this.currentElement[0].parentNode);
4228 } else {
4229 var _sub = this._getDoc().createElement(tag);
4230 _sub.innerHTML = this.currentElement[0].innerHTML;
4231 this.currentElement[0].parentNode.replaceChild(_sub, this.currentElement[0]);
4232 }
4233 exec = false;
4234 }
4235 break;
4236 case 'formatblock':
4237 value = 'blockquote';
4238 if (this.browser.webkit) {
4239 this._createCurrentElement('blockquote');
4240 if (YAHOO.util.Dom.hasClass(this.currentElement[0].parentNode, 'yui-tag-blockquote')) {
4241 var span = this._getDoc().createElement('span');
4242 span.innerHTML = this.currentElement[0].innerHTML;
4243 YAHOO.util.Dom.addClass(span, 'yui-non');
4244 this.currentElement[0].parentNode.parentNode.replaceChild(span, this.currentElement[0].parentNode);
4245 }
4246 exec = false;
4247 } else {
4248 var tar = Event.getTarget(this.currentEvent);
4249 if (tar && tar.tagName && (tar.tagName.toLowerCase() == 'blockquote')) {
4250 var span = this._getDoc().createElement('span');
4251 span.innerHTML = tar.innerHTML;
4252 YAHOO.util.Dom.addClass(span, 'yui-non');
4253 tar.parentNode.replaceChild(span, tar);
4254 exec = false;
4255 }
4256 }
4257 break;
4258 case 'indent':
4259 case 'outdent':
4260 this._createCurrentElement(action.toLowerCase());
4261 if (this.currentElement[0].parentNode) {
4262 if (action.toLowerCase() == 'outdent') {
4263 if (YAHOO.util.Dom.hasClass(this.currentElement[0].parentNode, 'yui-tag-indent')) {
4264 var span = this._getDoc().createElement('span');
4265 span.innerHTML = this.currentElement[0].innerHTML;
4266 YAHOO.util.Dom.addClass(span, 'yui-non');
4267 this.currentElement[0].parentNode.parentNode.replaceChild(span, this.currentElement[0].parentNode);
4268 }
4269 }
4270 }
4271 exec = false;
4272 break;
4273 case 'insertorderedlist':
4274 case 'insertunorderedlist':
4275 /**
4276 * @knownissue Safari 2.+ doesn't support ordered and unordered lists
4277 * @browser Safari 2.x
4278 * The issue with this workaround is that when applied to a set of text
4279 * that has BR's in it, Safari may or may not pick up the individual items as
4280 * list items. This is fixed in WebKit (Safari 3)
4281 */
4282 var tag = ((action.toLowerCase() == 'insertorderedlist') ? 'ol' : 'ul');
4283 //if ((this.browser.webkit && !this._getDoc().queryCommandEnabled(action)) || this.browser.opera) {
4284 if ((this.browser.webkit && !this._getDoc().queryCommandEnabled(action))) {
4285 var selEl = this._getSelectedElement();
4286 if ((selEl.tagName.toLowerCase() == 'li') && (selEl.parentNode.tagName.toLowerCase() == tag)) {
4287 YAHOO.log('We already have a list, undo it', 'info', 'Editor');
4288 var el = selEl.parentNode;
4289 var list = this._getDoc().createElement('span');
4290 YAHOO.util.Dom.addClass(list, 'yui-non');
4291 var str = '';
4292 var lis = el.getElementsByTagName('li');
4293 for (var i = 0; i < lis.length; i++) {
4294 str += lis[i].innerHTML + '<br>';
4295 }
4296 list.innerHTML = str;
4298 } else {
4299 YAHOO.log('Create list item', 'info', 'Editor');
4300 this._createCurrentElement(tag.toLowerCase());
4301 var el = this.currentElement[0];
4302 var list = this._getDoc().createElement(tag);
4303 if (tag == 'ol') {
4304 list.type = value;
4305 }
4306 var li = this._getDoc().createElement('li');
4307 li.innerHTML = el.innerHTML + ' ';
4308 list.appendChild(li);
4309 }
4310 el.parentNode.replaceChild(list, el);
4311 exec = false;
4312 } else {
4313 var el = this._getSelectedElement();
4314 if ((el.tagName.toLowerCase() == 'li') && (el.parentNode.tagName.toLowerCase() == tag) || (this.browser.ie && this._getRange().parentElement && this._getRange().parentElement.tagName && (this._getRange().parentElement.tagName.toLowerCase() == 'li'))) { //we are in a list..
4315 YAHOO.log('We already have a list, undo it', 'info', 'Editor');
4316 if (this.browser.ie) {
4317 YAHOO.log('Undo IE', 'info', 'Editor');
4318 exec = false;
4319 var str = '';
4320 var lis = el.parentNode.getElementsByTagName('li');
4321 for (var i = 0; i < lis.length; i++) {
4322 str += lis[i].innerHTML + '<br>';
4323 }
4324 var newEl = this._getDoc().createElement('span');
4325 newEl.innerHTML = str;
4326 el.parentNode.parentNode.replaceChild(newEl, el.parentNode);
4327 } else {
4328 this.nodeChange();
4329 this._getDoc().execCommand(action, '', el.parentNode);
4330 this.nodeChange();
4331 }
4332 }
4333 if (this.browser.opera) {
4334 var self = this;
4335 window.setTimeout(function() {
4336 var lis = self._getDoc().getElementsByTagName('li');
4337 for (var i = 0; i < lis.length; i++) {
4338 if (lis[i].innerHTML.toLowerCase() == '<br>') {
4339 lis[i].parentNode.parentNode.removeChild(lis[i].parentNode);
4340 }
4341 }
4342 },30);
4343 }
4344 if (this.browser.ie && exec) {
4345 var html = '';
4346 if (this._getRange().html) {
4347 html = '<li>' + this._getRange().html+ '</li>';
4348 } else {
4349 html = '<li>' + this._getRange().text + '</li>';
4350 }
4352 this._getRange().pasteHTML('<' + tag + '>' + html + '</' + tag + '>');
4353 exec = false;
4354 }
4355 }
4356 break;
4357 case 'fontname':
4358 var selEl = this._getSelectedElement();
4359 this.currentFont = value;
4360 if (selEl && selEl.tagName && !this._hasSelection()) {
4361 YAHOO.util.Dom.setStyle(selEl, 'font-family', value);
4362 exec = false;
4363 }
4364 break;
4365 case 'fontsize':
4366 if ((this.currentElement.length > 0) && (!this._hasSelection())) {
4367 YAHOO.util.Dom.setStyle(this.currentElement, 'fontSize', value);
4368 } else {
4369 this._createCurrentElement('span', {'fontSize': value });
4370 }
4371 exec = false;
4372 break;
4373 }
4374 if (exec) {
4375 YAHOO.log('execCommand::(' + action + '), (' + value + ')', 'info', 'Editor');
4376 try {
4377 this._getDoc().execCommand(action, false, value);
4378 } catch(e) {
4379 YAHOO.log('execCommand Failed', 'error', 'Editor');
4380 }
4381 } else {
4382 YAHOO.log('OVERRIDE::execCommand skipped', 'warn', 'Editor');
4383 }
4384 this.on('afterExecCommand', function() {
4385 this.unsubscribeAll('afterExecCommand');
4386 this.nodeChange();
4387 });
4388 this.fireEvent('afterExecCommand', { type: 'afterExecCommand', target: this });
4390 },
4391 /**
4392 * @private
4393 * @method _createCurrentElement
4394 * @param {String} tagName (optional defaults to a) The tagname of the element that you wish to create
4395 * @param {Object} tagStyle (optional) Object literal containing styles to apply to the new element.
4396 * @description This is a work around for the various browser issues with execCommand. This method will run <code>execCommand('fontname', false, 'yui-tmp')</code> on the given selection.
4397 * It will then search the document for a span with the font-family set to <strong>yui-tmp</strong> and replace that with another span that has other information in it, then assign the new span to
4398 * <code>this.currentElement</code>, so we now have an element reference to the element that was just modified. At this point we can use standard DOM manipulation to change it as we see fit.
4399 */
4400 _createCurrentElement: function(tagName, tagStyle) {
4401 var tagName = ((tagName) ? tagName : 'a'),
4402 sel = this._getSelection(),
4403 tar = null,
4404 el = [],
4405 _doc = this._getDoc();
4407 if (this.currentFont) {
4408 if (!tagStyle) {
4409 tagStyle = {};
4410 }
4411 tagStyle.fontFamily = this.currentFont;
4412 this.currentFont = null;
4413 }
4414 this.currentElement = [];
4416 var _elCreate = function() {
4417 switch (tagName) {
4418 case 'h1':
4419 case 'h2':
4420 case 'h3':
4421 case 'h4':
4422 case 'h5':
4423 case 'h6':
4424 var el = _doc.createElement(tagName);
4425 break;
4426 default:
4427 var el = _doc.createElement('span');
4428 YAHOO.util.Dom.addClass(el, 'yui-tag-' + tagName);
4429 YAHOO.util.Dom.addClass(el, 'yui-tag');
4430 el.setAttribute('tag', tagName);
4431 el.tabIndex = 1;
4433 for (var i in tagStyle) {
4434 if (YAHOO.util.Lang.hasOwnProperty(tagStyle, i)) {
4435 el.style[i] = tagStyle[i];
4436 }
4437 }
4438 break;
4439 }
4440 return el;
4441 };
4443 if (!this._hasSelection()) {
4444 if (this._getDoc().queryCommandEnabled('insertimage')) {
4445 this._getDoc().execCommand('insertimage', false, 'yui-tmp-img');
4446 var imgs = this._getDoc().getElementsByTagName('img');
4447 for (var i = 0; i < imgs.length; i++) {
4448 if (imgs[i].getAttribute('src', 2) == 'yui-tmp-img') {
4449 el = _elCreate();
4450 imgs[i].parentNode.replaceChild(el, imgs[i]);
4451 this.currentElement[this.currentElement.length] = el;
4452 //this.currentElement = el;
4453 }
4454 }
4455 } else {
4456 if (this.currentEvent) {
4457 tar = YAHOO.util.Event.getTarget(this.currentEvent);
4458 } else {
4459 //For Safari..
4460 tar = this._getDoc().body;
4461 }
4462 }
4463 if (tar) {
4464 /**
4465 * @knownissue
4466 * @browser Safari 2.x
4467 * @description The issue here is that we have no way of knowing where the cursor position is
4468 * inside of the iframe, so we have to place the newly inserted data in the best place that we can.
4469 */
4470 el = _elCreate();
4471 if (tar.tagName.toLowerCase() == 'body') {
4472 tar.appendChild(el);
4473 } else if (tar.nextSibling) {
4474 tar.parentNode.insertBefore(el, tar.nextSibling);
4475 } else {
4476 tar.parentNode.appendChild(el);
4477 }
4478 //this.currentElement = el;
4479 this.currentElement[this.currentElement.length] = el;
4480 this.currentEvent = null;
4481 if (this.browser.webkit) {
4482 //Force Safari to focus the new element
4483 this._getSelection().setBaseAndExtent(el, 0, el, 0);
4484 this._getSelection().collapse(true);
4485 }
4486 }
4487 } else {
4488 //Force CSS Styling for this action...
4489 this._setEditorStyle(true);
4490 this._getDoc().execCommand('fontname', false, 'yui-tmp');
4491 var _tmp = [];
4492 /* TODO: This needs to be cleaned up.. */
4493 var _tmp1 = this._getDoc().getElementsByTagName('font');
4494 var _tmp2 = this._getDoc().getElementsByTagName(this._getSelectedElement().tagName);
4495 var _tmp3 = this._getDoc().getElementsByTagName('span');
4496 var _tmp4 = this._getDoc().getElementsByTagName('i');
4497 var _tmp5 = this._getDoc().getElementsByTagName('b');
4498 for (var e = 0; e < _tmp1.length; e++) {
4499 _tmp[_tmp.length] = _tmp1[e];
4500 }
4501 for (var e = 0; e < _tmp2.length; e++) {
4502 _tmp[_tmp.length] = _tmp2[e];
4503 }
4504 for (var e = 0; e < _tmp3.length; e++) {
4505 _tmp[_tmp.length] = _tmp3[e];
4506 }
4507 for (var e = 0; e < _tmp4.length; e++) {
4508 _tmp[_tmp.length] = _tmp4[e];
4509 }
4510 for (var e = 0; e < _tmp5.length; e++) {
4511 _tmp[_tmp.length] = _tmp5[e];
4512 }
4513 for (var i = 0; i < _tmp.length; i++) {
4514 if ((YAHOO.util.Dom.getStyle(_tmp[i], 'font-family') == 'yui-tmp') || (_tmp[i].face && (_tmp[i].face == 'yui-tmp'))) {
4515 var el = _elCreate();
4516 el.innerHTML = _tmp[i].innerHTML;
4517 if (_tmp[i].parentNode) {
4518 _tmp[i].parentNode.replaceChild(el, _tmp[i]);
4519 //this.currentElement = el;
4520 this.currentElement[this.currentElement.length] = el;
4521 this.currentEvent = null;
4522 if (this.browser.webkit) {
4523 //Force Safari to focus the new element
4524 this._getSelection().setBaseAndExtent(el, 0, el, 0);
4525 this._getSelection().collapse(true);
4526 }
4527 if (this.browser.ie && tagStyle && tagStyle.fontSize) {
4528 this._getSelection().empty();
4529 }
4530 if (this.browser.gecko) {
4531 this._getSelection().collapseToStart();
4532 }
4533 }
4534 }
4535 }
4536 var len = this.currentElement.length;
4537 for (var i = 0; i < len; i++) {
4538 if ((i + 1) != len) { //Skip the last one in the list
4539 if (this.currentElement[i] && this.currentElement[i].nextSibling) {
4540 if (this.currentElement[i].tagName && (this.currentElement[i].tagName.toLowerCase() != 'br')) {
4541 this.currentElement[this.currentElement.length] = this.currentElement[i].nextSibling;
4542 }
4543 }
4544 }
4545 }
4546 }
4547 },
4548 /**
4549 * @method saveHTML
4550 * @description Cleans the HTML with the cleanHTML method then places that string back into the textarea.
4551 */
4552 saveHTML: function() {
4553 var html = this.cleanHTML();
4554 this.get('textarea').value = html;
4555 return html;
4556 },
4557 /**
4558 * @method setEditorHTML
4559 * @param {String} html The html content to load into the editor
4560 * @description Loads HTML into the editors body
4561 */
4562 setEditorHTML: function(html) {
4563 this._getDoc().body.innerHTML = html;
4564 this.nodeChange();
4565 },
4566 /**
4567 * @method getEditorHTML
4568 * @description Gets the unprocessed/unfiltered HTML from the editor
4569 */
4570 getEditorHTML: function() {
4571 return this._getDoc().body.innerHTML;
4572 },
4573 /**
4574 * @method cleanHTML
4575 * @param {String} html The unfiltered HTML
4576 * @description Process the HTML with a few regexes to clean it up and stabilize the output
4577 * @returns {String} The filtered HTML
4578 */
4579 cleanHTML: function(html) {
4580 //Start Filtering Output
4581 //Begin RegExs..
4582 if (!html) {
4583 var html = this.getEditorHTML();
4584 }
4585 //Make some backups...
4586 html = html.replace(/<div><br><\/div>/gi, '<YUI_BR>');
4587 html = html.replace(/<p>( | )<\/p>/g, '<YUI_BR>');
4588 html = html.replace(/<p><br> <\/p>/gi, '<YUI_BR>');
4589 html = html.replace(/<p> <\/p>/gi, '<YUI_BR>');
4591 html = html.replace(/<br>/gi, '<YUI_BR>');
4592 html = html.replace(/<br\/>/gi, '<YUI_BR>');
4593 html = html.replace(/<img([^>]*)>/gi, '<YUI_IMG$1>');
4594 html = html.replace(/<ul([^>]*)>/gi, '<YUI_UL$1>');
4595 html = html.replace(/<\/ul>/gi, '<\/YUI_UL>');
4597 //Convert b and i tags to strong and em tags
4598 html = html.replace(/<i([^>]*)>/gi, '<em$1>');
4599 html = html.replace(/<\/i>/gi, '</em>');
4600 html = html.replace(/<b([^>]*)>/gi, '<strong$1>');
4601 html = html.replace(/<\/b>/gi, '</strong>');
4603 html = html.replace(/<font/gi, '<font');
4604 html = html.replace(/<\/font>/gi, '</font>');
4605 html = html.replace(/<span/gi, '<span');
4606 html = html.replace(/<\/span>/gi, '</span>');
4607 html = html.replace(/<u/gi, '<u');
4608 html = html.replace(/\/u>/gi, '/u>');
4610 html = html.replace(/<ol([^>]*)>/gi, '<ol$1>');
4611 html = html.replace(/\/ol>/gi, '/ol>');
4612 html = html.replace(/<li/gi, '<li');
4613 html = html.replace(/\/li>/gi, '/li>');
4615 //Handle the sudo A tags
4616 html = html.replace(new RegExp('<span ([^>]*) tag="a" ([^>]*)>([^>]*)<\/span>', 'gi'), '<a $1 $2>$3</a>');
4618 //Safari only regexes
4619 if (this.browser.webkit) {
4621 html = html.replace(/Apple-style-span/gi, '');
4623 }
4625 //yui-tag-a yui-tag yui-non yui-img
4626 html = html.replace(/yui-tag-a/gi, '');
4627 html = html.replace(/yui-tag-span/gi, '');
4628 html = html.replace(/yui-tag/gi, '');
4629 html = html.replace(/yui-non/gi, '');
4630 html = html.replace(/yui-img/gi, '');
4638 //Other string cleanup
4639 html = html.replace(/<br><li/gi, '<li');
4640 //<P><br> </P>
4641 //html = html.replace(/<span >([^>]*)<\/span>/gi, '$1');
4642 //html = html.replace(/<div>([^>]*)<\/div>/gi, '$1');
4645 //Replace our backups with the real thing
4646 html = html.replace(/<YUI_BR>/g, '<br>');
4647 html = html.replace(/<YUI_IMG([^>]*)>/g, '<img$1>');
4648 html = html.replace(/<YUI_UL([^>]*)>/g, '<ul$1>');
4649 html = html.replace(/<\/YUI_UL>/g, '<\/ul>');
4651 return html;
4652 },
4653 /**
4654 * @method clearEditorDoc
4655 * @description Clear the doc of the Editor
4656 */
4657 clearEditorDoc: function() {
4658 this._getDoc().body.innerHTML = ' ';
4659 },
4660 /**
4661 * @private
4662 * @method _renderPanel
4663 * @description Renders the panel used for Editor Windows to the document so we can start using it..
4665 */
4666 _renderPanel: function() {
4667 if (!YAHOO.widget.EditorInfo.panel) {
4668 var panel = new YAHOO.widget.Panel(this.EDITOR_PANEL_ID, {
4669 width: '300px',
4670 iframe: true,
4671 visible: false,
4672 underlay: 'none',
4673 draggable: false,
4674 close: false
4675 });
4676 YAHOO.widget.EditorInfo.panel = panel;
4677 } else {
4678 var panel = YAHOO.widget.EditorInfo.panel;
4679 }
4680 this.set('panel', panel);
4682 this.get('panel').setBody('---');
4683 this.get('panel').setHeader(' ');
4684 this.get('panel').setFooter(' ');
4685 if (this.DOMReady) {
4686 this.get('panel').render(document.body);
4687 Dom.addClass(this.get('panel').element, 'yui-editor-panel');
4688 } else {
4689 Event.onDOMReady(function() {
4690 this.get('panel').render(document.body);
4691 Dom.addClass(this.get('panel').element, 'yui-editor-panel');
4692 }, this, true);
4693 }
4694 this.get('panel').showEvent.subscribe(function() {
4695 YAHOO.util.Dom.setStyle(this.element, 'display', 'block');
4696 });
4697 return this.get('panel');
4698 },
4699 /**
4700 * @method openWindow
4701 * @param {<a href="YAHOO.widget.EditorWindow.html">YAHOO.widget.EditorWindow</a>} win A <a href="YAHOO.widget.EditorWindow.html">YAHOO.widget.EditorWindow</a> instance
4703 */
4704 openWindow: function(win) {
4705 this.toolbar.set('disabled', true); //Disable the toolbar when an editor window is open..
4706 Event.addListener(document, 'keypress', this._closeWindow, this, true);
4707 if (YAHOO.widget.EditorInfo.window.win && YAHOO.widget.EditorInfo.window.scope) {
4708 YAHOO.widget.EditorInfo.window.scope.closeWindow.call(YAHOO.widget.EditorInfo.window.scope);
4709 }
4710 YAHOO.widget.EditorInfo.window.win = win;
4711 YAHOO.widget.EditorInfo.window.scope = this;
4713 var self = this,
4714 xy = Dom.getXY(this.currentElement[0]),
4715 elXY = Dom.getXY(this.get('iframe').get('element')),
4716 panel = this.get('panel'),
4717 newXY = [(xy[0] + elXY[0] - 20), (xy[1] + elXY[1] + 10)],
4718 wWidth = (parseInt(win.attrs.width) / 2),
4719 align = 'center';
4721 this.fireEvent('beforeOpenWindow', { type: 'beforeOpenWindow', win: win, panel: panel });
4723 body = document.createElement('div');
4724 body.className = this.CLASS_PREFIX + '-body-cont';
4726 var _note = document.createElement('h3');
4727 _note.className = 'yui-editor-skipheader';
4728 _note.innerHTML = this.STR_CLOSE_WINDOW_NOTE;
4729 body.appendChild(_note);
4730 form = document.createElement('form');
4731 form.setAttribute('method', 'GET');
4732 var windowName = win.name;
4733 Event.addListener(form, 'submit', function(ev) {
4734 var evName = 'window' + windowName + 'Submit';
4735 self.fireEvent(evName, { type: evName, target: this });
4736 Event.stopEvent(ev);
4737 }, this, true);
4738 body.appendChild(form);
4740 Dom.setStyle(panel.element.firstChild, 'width', win.attrs.width);
4741 if (Lang.isObject(win.body)) { //Assume it's a reference
4742 form.appendChild(win.body);
4743 } else { //Assume it's a string
4744 var _tmp = document.createElement('div');
4745 _tmp.innerHTML = win.body;
4746 form.appendChild(_tmp);
4747 }
4748 var _close = document.createElement('span');
4749 _close.innerHTML = 'X';
4750 _close.title = this.STR_CLOSE_WINDOW;
4751 _close.className = 'close';
4752 Event.addListener(_close, 'click', function() {
4753 this.closeWindow();
4754 }, this, true);
4755 var _knob = document.createElement('span');
4756 _knob.innerHTML = '^';
4757 _knob.className = 'knob';
4758 win._knob = _knob;
4760 var _header = document.createElement('h3');
4761 _header.innerHTML = win.header;
4763 panel.cfg.setProperty('width', win.attrs.width);
4764 panel.setHeader(' '); //Clear the current header
4765 panel.appendToHeader(_header);
4766 _header.appendChild(_close);
4767 _header.appendChild(_knob);
4768 panel.setBody(' '); //Clear the current body
4769 panel.setFooter(' '); //Clear the current footer
4770 if (win.footer != null) {
4771 panel.setFooter(win.footer);
4772 }
4773 panel.appendToBody(body); //Append the new DOM node to it
4774 panel.showEvent.subscribe(function() {
4775 Event.addListener(panel.element, 'click', function(ev) {
4776 Event.stopPropagation(ev);
4777 });
4778 }, this, true);
4779 panel.hideEvent.subscribe(function() {
4780 this.currentWindow = null;
4781 var evName = 'window' + windowName + 'Close';
4782 this.fireEvent(evName, { type: evName, target: this });
4784 }, this, true);
4785 this.currentWindow = win;
4786 this.moveWindow(true);
4787 panel.show();
4788 this.fireEvent('afterOpenWindow', { type: 'afterOpenWindow', win: win, panel: panel });
4789 },
4790 /**
4791 * @method moveWindow
4792 * @param {Boolean} force Boolean to tell it to move but not use any animation (Usually done the first time the window is loaded.)
4793 * @description Realign the window with the currentElement and reposition the knob above the panel.
4794 */
4795 moveWindow: function(force) {
4796 if (!this.currentWindow) {
4797 return false;
4798 }
4799 var win = this.currentWindow,
4800 xy = Dom.getXY(this.currentElement[0]),
4801 elXY = Dom.getXY(this.get('iframe').get('element')),
4802 panel = this.get('panel'),
4803 //newXY = [(xy[0] + elXY[0] - 20), (xy[1] + elXY[1] + 10)],
4804 newXY = [(xy[0] + elXY[0]), (xy[1] + elXY[1])],
4805 wWidth = (parseInt(win.attrs.width) / 2),
4806 align = 'center',
4807 orgXY = panel.cfg.getProperty('xy'),
4808 _knob = win._knob;
4810 newXY[0] = ((newXY[0] - wWidth) + 20);
4811 //Account for the Scroll bars in a scrolled editor window.
4812 newXY[0] = newXY[0] - Dom.getDocumentScrollLeft(this._getDoc());
4813 newXY[1] = newXY[1] - Dom.getDocumentScrollTop(this._getDoc());
4817 if (this.currentElement[0].tagName && (this.currentElement[0].tagName.toLowerCase() == 'img')) {
4818 if (this.currentElement[0].src.indexOf(this.get('blankimage')) != -1) {
4819 newXY[0] = (newXY[0] + (75 / 2)); //Placeholder size
4820 newXY[1] = (newXY[1] + 75); //Placeholder sizea
4821 } else {
4822 var w = parseInt(this.currentElement[0].width);
4823 var h = parseInt(this.currentElement[0].height);
4824 newXY[0] = (newXY[0] + (w / 2));
4825 newXY[1] = (newXY[1] + h);
4826 }
4827 newXY[1] = newXY[1] + 15;
4828 } else {
4829 if (Dom.getStyle(this.currentElement[0], 'fontSize').indexOf('px') != -1) {
4830 newXY[1] = newXY[1] + parseInt(Dom.getStyle(this.currentElement[0], 'fontSize')) + 5;
4831 } else {
4832 newXY[1] = newXY[1] + 20;
4833 }
4834 }
4835 if (newXY[0] < elXY[0]) {
4836 newXY[0] = elXY[0] + 5;
4837 align = 'left';
4838 }
4840 if ((newXY[0] + (wWidth * 2)) > (elXY[0] + parseInt(this.get('iframe').get('element').clientWidth))) {
4841 newXY[0] = ((elXY[0] + parseInt(this.get('iframe').get('element').clientWidth)) - (wWidth * 2) - 5);
4842 align = 'right';
4843 }
4845 try {
4846 var xDiff = (newXY[0] - orgXY[0]);
4847 var yDiff = (newXY[1] - orgXY[1]);
4848 } catch (e) {
4849 var xDiff = 0;
4850 var yDiff = 0;
4851 }
4853 //Convert negative numbers to positive so we can get the difference in distance
4854 xDiff = ((xDiff < 0) ? (xDiff * -1) : xDiff);
4855 yDiff = ((yDiff < 0) ? (yDiff * -1) : yDiff);
4857 if (((xDiff > 10) || (yDiff > 10)) || force) { //Only move the window if it's supposed to move more than 10px or force was passed (new window)
4858 var _knobLeft = 0,
4859 elW = 0;
4861 if (this.currentElement[0].width) {
4862 elW = (parseInt(this.currentElement[0].width) / 2);
4863 }
4865 var leftOffset = xy[0] + elXY[0] + elW;
4866 _knobLeft = leftOffset - newXY[0];
4867 //Check to see if the knob will go off either side & reposition it
4868 if (_knobLeft > (parseInt(win.attrs.width) - 40)) {
4869 _knobLeft = parseInt(win.attrs.width) - 40;
4870 } else if (_knobLeft < 40) {
4871 _knobLeft = 40;
4872 }
4873 if (isNaN(_knobLeft)) {
4874 _knobLeft = 40;
4875 }
4876 if (force) {
4877 if (_knob) {
4878 _knob.style.left = _knobLeft + 'px';
4879 }
4880 if (this.get('animate')) {
4881 Dom.setStyle(panel.element, 'opacity', '0');
4882 var anim = new YAHOO.util.Anim(panel.element, {
4883 opacity: {
4884 from: 0,
4885 to: 1
4886 }
4887 }, .1, YAHOO.util.Easing.easeOut);
4888 panel.cfg.setProperty('xy', newXY);
4889 anim.onComplete.subscribe(function() {
4890 if (this.browser.ie) {
4891 panel.element.style.filter = 'none';
4892 }
4893 }, this, true);
4894 anim.animate();
4895 } else {
4896 panel.cfg.setProperty('xy', newXY);
4897 }
4898 } else {
4899 if (this.get('animate')) {
4900 var anim = new YAHOO.util.Anim(panel.element, {}, .5, YAHOO.util.Easing.easeOut);
4901 anim.attributes = {
4902 top: {
4903 to: newXY[1]
4904 },
4905 left: {
4906 to: newXY[0]
4907 }
4908 }
4909 anim.onComplete.subscribe(function() {
4910 panel.cfg.setProperty('xy', newXY);
4911 });
4912 //We have to animate the iframe shim at the same time as the panel or we get scrollbar bleed ..
4913 var iframeAnim = new YAHOO.util.Anim(panel.iframe, anim.attributes, .5, YAHOO.util.Easing.easeOut)
4915 var _knobAnim = new YAHOO.util.Anim(_knob, {
4916 left: {
4917 to: _knobLeft
4918 }
4919 }, .75, YAHOO.util.Easing.easeOut);
4920 anim.animate();
4921 iframeAnim.animate();
4922 _knobAnim.animate();
4923 } else {
4924 _knob.style.left = _knobLeft + 'px';
4925 panel.cfg.setProperty('xy', newXY);
4926 }
4927 }
4928 }
4929 },
4930 /**
4931 * @private
4932 * @method _closeWindow
4933 * @description Close the currently open EditorWindow with the Escape key.
4934 * @param {Event} ev The keypress Event that we are trapping
4935 */
4936 _closeWindow: function(ev) {
4937 if (ev.keyCode == 27) {
4938 if (this.currentWindow) {
4939 this.closeWindow();
4940 }
4941 }
4942 },
4943 /**
4944 * @method closeWindow
4945 * @description Close the currently open EditorWindow.
4946 */
4947 closeWindow: function() {
4948 YAHOO.widget.EditorInfo.window = {};
4949 this.fireEvent('closeWindow', { type: 'closeWindow', win: this.currentWindow });
4950 this.currentWindow = null;
4951 this.get('panel').hide();
4952 this.get('panel').cfg.setProperty('xy', [-900,-900]);
4953 this.get('panel').syncIframe(); //Needed to move the iframe with the hidden panel
4954 this.unsubscribeAll('afterExecCommand');
4955 this.toolbar.set('disabled', false); //enable the toolbar now that the window is closed
4956 this._focusWindow();
4957 Event.removeListener(document, 'keypress', this._closeWindow);
4958 },
4959 /**
4960 * @method destroy
4961 * @description Destroys the editor, all of it's elements and objects.
4962 * @return {Boolean}
4963 */
4964 destroy: function() {
4965 this.saveHTML();
4966 this.toolbar.destroy();
4967 Dom.setStyle(this.get('textarea'), 'display', 'block');
4968 var textArea = this.get('textarea');
4969 this.get('element_cont').get('parentNode').replaceChild(textArea, this.get('element_cont').get('element'));
4970 this.get('element_cont').get('element').innerHTML = '';
4971 //Brutal Object Destroy
4972 for (var i in this) {
4973 if (Lang.hasOwnProperty(this, i)) {
4974 this[i] = null;
4975 }
4976 }
4977 return true;
4978 },
4979 /**
4980 * @method toString
4981 * @description Returns a string representing the editor.
4982 * @return {String}
4983 */
4984 toString: function() {
4985 var str = 'Editor';
4986 if (this.get && this.get('element_cont')) {
4987 str = 'Editor (#' + this.get('element_cont').get('id') + ')' + ((this.get('disabled') ? ' Disabled' : ''));
4988 }
4989 return str;
4990 }
4991 });
4993 /**
4994 * @event toolbarLoaded
4995 * @description Event is fired during the render process directly after the Toolbar is loaded. Allowing you to attach events to the toolbar. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
4996 * @type YAHOO.util.CustomEvent
4997 */
4998 /**
4999 * @event afterRender
5000 * @description Event is fired after the render process finishes. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5001 * @type YAHOO.util.CustomEvent
5002 */
5003 /**
5004 * @event editorContentLoaded
5005 * @description Event is fired after the editor iframe's document fully loads and fires it's onload event. From here you can start injecting your own things into the document. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5006 * @type YAHOO.util.CustomEvent
5007 */
5008 /**
5009 * @event editorMouseUp
5010 * @param {Event} ev The DOM Event that occured
5011 * @description Passed through HTML Event. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5012 * @type YAHOO.util.CustomEvent
5013 */
5014 /**
5015 * @event editorMouseDown
5016 * @param {Event} ev The DOM Event that occured
5017 * @description Passed through HTML Event. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5018 * @type YAHOO.util.CustomEvent
5019 */
5020 /**
5021 * @event editorDoubleClick
5022 * @param {Event} ev The DOM Event that occured
5023 * @description Passed through HTML Event. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5024 * @type YAHOO.util.CustomEvent
5025 */
5026 /**
5027 * @event editorKeyUp
5028 * @param {Event} ev The DOM Event that occured
5029 * @description Passed through HTML Event. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5030 * @type YAHOO.util.CustomEvent
5031 */
5032 /**
5033 * @event editorKeyPress
5034 * @param {Event} ev The DOM Event that occured
5035 * @description Passed through HTML Event. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5036 * @type YAHOO.util.CustomEvent
5037 */
5038 /**
5039 * @event editorKeyDown
5040 * @param {Event} ev The DOM Event that occured
5041 * @description Passed through HTML Event. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5042 * @type YAHOO.util.CustomEvent
5043 */
5044 /**
5045 * @event beforeNodeChange
5046 * @description Event fires at the beginning of the nodeChange process. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5047 * @type YAHOO.util.CustomEvent
5048 */
5049 /**
5050 * @event afterNodeChange
5051 * @description Event fires at the end of the nodeChange process. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5052 * @type YAHOO.util.CustomEvent
5053 */
5054 /**
5055 * @event beforeExecCommand
5056 * @description Event fires at the beginning of the execCommand process. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5057 * @type YAHOO.util.CustomEvent
5058 */
5059 /**
5060 * @event afterExecCommand
5061 * @description Event fires at the end of the execCommand process. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5062 * @type YAHOO.util.CustomEvent
5063 */
5064 /**
5065 * @event beforeOpenWindow
5066 * @param {<a href="YAHOO.widget.EditorWindow.html">EditorWindow</a>} win The EditorWindow object
5067 * @param {Overlay} panel The Overlay object that is used to create the window.
5068 * @description Event fires before an Editor Window is opened. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5069 * @type YAHOO.util.CustomEvent
5070 */
5071 /**
5072 * @event afterOpenWindow
5073 * @param {<a href="YAHOO.widget.EditorWindow.html">EditorWindow</a>} win The EditorWindow object
5074 * @param {Overlay} panel The Overlay object that is used to create the window.
5075 * @description Event fires after an Editor Window is opened. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5076 * @type YAHOO.util.CustomEvent
5077 */
5078 /**
5079 * @event closeWindow
5080 * @param {<a href="YAHOO.widget.EditorWindow.html">EditorWindow</a>} win The EditorWindow object
5081 * @description Event fires after an Editor Window is closed. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5082 * @type YAHOO.util.CustomEvent
5083 */
5084 /**
5085 * @event windowCMDOpen
5086 * @param {<a href="YAHOO.widget.EditorWindow.html">EditorWindow</a>} win The EditorWindow object
5087 * @param {Overlay} panel The Overlay object that is used to create the window.
5088 * @description Dynamic event fired when an <a href="YAHOO.widget.EditorWindow.html">EditorWindow</a> is opened.. The dynamic event is based on the name of the window. Example Window: createlink, opening this window would fire the windowcreatelinkOpen event. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5089 * @type YAHOO.util.CustomEvent
5090 */
5091 /**
5092 * @event windowCMDClose
5093 * @param {<a href="YAHOO.widget.EditorWindow.html">EditorWindow</a>} win The EditorWindow object
5094 * @param {Overlay} panel The Overlay object that is used to create the window.
5095 * @description Dynamic event fired when an <a href="YAHOO.widget.EditorWindow.html">EditorWindow</a> is closed.. The dynamic event is based on the name of the window. Example Window: createlink, opening this window would fire the windowcreatelinkClose event. See <a href="YAHOO.util.Element.html#addListener">Element.addListener</a> for more information on listening for this event.
5096 * @type YAHOO.util.CustomEvent
5097 */
5099 /**
5100 * @description Singleton object used to track the open window objects and panels across the various open editors
5101 * @class EditorInfo
5102 * @static
5103 */
5104 YAHOO.widget.EditorInfo = {
5105 /**
5106 * @private
5107 * @property window
5108 * @description A reference to the currently open window object in any editor on the page.
5110 */
5111 window: {},
5112 /**
5113 * @private
5114 * @property panel
5115 * @description A reference to the currently open panel in any editor on the page.
5117 */
5118 panel: null
5119 }
5121 /**
5122 * @description Class to hold Window information between uses. We use the same panel to show the windows, so using this will allow you to configure a window before it is shown.
5123 * This is what you pass to Editor.openWindow();. These parameters will not take effect until the openWindow() is called in the editor.
5124 * @class EditorWindow
5125 * @param {String} name The name of the window.
5126 * @param {Object} attrs Attributes for the window. Current attributes used are : height and width
5127 */
5128 YAHOO.widget.EditorWindow = function(name, attrs) {
5129 /**
5130 * @private
5131 * @property name
5132 * @description A unique name for the window
5133 */
5134 this.name = name.replace(' ', '_');
5135 /**
5136 * @private
5137 * @property attrs
5138 * @description The window attributes
5139 */
5140 this.attrs = attrs;
5141 }
5143 YAHOO.widget.EditorWindow.prototype = {
5144 /**
5145 * @private
5146 * @property _cache
5147 * @description Holds a cache of the DOM for the window so we only have to build it once..
5148 */
5149 _cache: null,
5150 /**
5151 * @private
5152 * @property header
5153 * @description Holder for the header of the window, used in Editor.openWindow
5154 */
5155 header: null,
5156 /**
5157 * @private
5158 * @property body
5159 * @description Holder for the body of the window, used in Editor.openWindow
5160 */
5161 body: null,
5162 /**
5163 * @private
5164 * @property footer
5165 * @description Holder for the footer of the window, used in Editor.openWindow
5166 */
5167 footer: null,
5168 /**
5169 * @method setHeader
5170 * @description Sets the header for the window.
5171 * @param {String/HTMLElement} str The string or DOM reference to be used as the windows header.
5172 */
5173 setHeader: function(str) {
5174 this.header = str;
5175 },
5176 /**
5177 * @method setBody
5178 * @description Sets the body for the window.
5179 * @param {String/HTMLElement} str The string or DOM reference to be used as the windows body.
5180 */
5181 setBody: function(str) {
5182 this.body = str;
5183 },
5184 /**
5185 * @method setFooter
5186 * @description Sets the footer for the window.
5187 * @param {String/HTMLElement} str The string or DOM reference to be used as the windows footer.
5188 */
5189 setFooter: function(str) {
5190 this.footer = str;
5191 },
5192 /**
5193 * @method toString
5194 * @description Returns a string representing the EditorWindow.
5195 * @return {String}
5196 */
5197 toString: function() {
5198 return 'Editor Window (' + this.name + ')';
5199 }
5200 };
5204 })();