Creates a rich Toolbar widget based on Button. Primarily used with the Rich Text Editor
* @class Toolbar * @namespace YAHOO.widget * @requires yahoo, dom, element, event * @optional container, menu, button, dragdrop * @beta */ (function() { /** * @private **/ var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, Lang = YAHOO.lang; /** * Provides a rich toolbar widget based on the button and menu widgets * @constructor * @param {String/HTMLElement} el The element to turn into a toolbar. * @param {Object} attrs Object liternal containing configuration parameters. */ YAHOO.widget.Toolbar = function(el, attrs) { YAHOO.log('Toolbar Initalizing', 'info', 'Toolbar'); YAHOO.log(arguments.length + ' arguments passed to constructor', 'info', 'Toolbar'); if (Lang.isObject(arguments[0]) && !Dom.get(el).nodeType) { var attrs = el; } var local_attrs = (attrs || {}); var oConfig = { element: null, attributes: local_attrs } if (Lang.isString(el) && Dom.get(el)) { oConfig.element = Dom.get(el); } else if (Lang.isObject(el) && Dom.get(el) && Dom.get(el).nodeType) { oConfig.element = Dom.get(el); } if (!oConfig.element) { YAHOO.log('No element defined, creating toolbar container', 'warn', 'Toolbar'); oConfig.element = document.createElement('DIV'); oConfig.element.id = Dom.generateId(); if (local_attrs.container && Dom.get(local_attrs.container)) { YAHOO.log('Container found in config appending to it (' + Dom.get(local_attrs.container).id + ')', 'info', 'Toolbar'); Dom.get(local_attrs.container).appendChild(oConfig.element); } } if (!oConfig.element.id) { oConfig.element.id = ((Lang.isString(el)) ? el : Dom.generateId()); YAHOO.log('No element ID defined for toolbar container, creating..', 'warn', 'Toolbar'); } YAHOO.log('Initing toolbar with id: ' + oConfig.element.id, 'info', 'Toolbar'); var cont = document.createElement('DIV'); oConfig.attributes.cont = cont; Dom.addClass(cont, 'yui-toolbar-subcont') oConfig.element.appendChild(cont); oConfig.attributes.element = oConfig.element; oConfig.attributes.id = oConfig.element.id; YAHOO.widget.Toolbar.superclass.constructor.call(this, oConfig.element, oConfig.attributes); } /** * @method _addMenuClasses * @private * @description This method is called from Menu's renderEvent to add a few more classes to the menu items * @param {String} ev The event that fired. * @param {Array} na Array of event information. * @param {Object} o Button config object. */ function _addMenuClasses(ev, na, o) { Dom.addClass(this.element, 'yui-toolbar-' + o.get('value') + '-menu'); if (Dom.hasClass(o._button.parentNode.parentNode, 'yui-toolbar-select')) { Dom.addClass(this.element, 'yui-toolbar-select-menu'); } var items = this.getItems(); for (var i = 0; i < items.length; i++) { 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())); Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-') : items[i]._oText.nodeValue.replace(/ /g, '-'))); } this._setWidth(); }; YAHOO.extend(YAHOO.widget.Toolbar, YAHOO.util.Element, { /** * @property dd * @description The DragDrop instance associated with the Toolbar * @type Object */ dd: null, /** * @property _colorData * @description Object reference containing colors hex and text values. * @type Object */ _colorData: { /* {{{ _colorData */ '#111111': 'Obsidian', '#2D2D2D': 'Dark Gray', '#434343': 'Shale', '#5B5B5B': 'Flint', '#737373': 'Gray', '#8B8B8B': 'Concrete', '#A2A2A2': 'Gray', '#B9B9B9': 'Titanium', '#000000': 'Black', '#D0D0D0': 'Light Gray', '#E6E6E6': 'Silver', '#FFFFFF': 'White', '#BFBF00': 'Pumpkin', '#FFFF00': 'Yellow', '#FFFF40': 'Banana', '#FFFF80': 'Pale Yellow', '#FFFFBF': 'Butter', '#525330': 'Raw Siena', '#898A49': 'Mildew', '#AEA945': 'Olive', '#7F7F00': 'Paprika', '#C3BE71': 'Earth', '#E0DCAA': 'Khaki', '#FCFAE1': 'Cream', '#60BF00': 'Cactus', '#80FF00': 'Chartreuse', '#A0FF40': 'Green', '#C0FF80': 'Pale Lime', '#DFFFBF': 'Light Mint', '#3B5738': 'Green', '#668F5A': 'Lime Gray', '#7F9757': 'Yellow', '#407F00': 'Clover', '#8A9B55': 'Pistachio', '#B7C296': 'Light Jade', '#E6EBD5': 'Breakwater', '#00BF00': 'Spring Frost', '#00FF80': 'Pastel Green', '#40FFA0': 'Light Emerald', '#80FFC0': 'Sea Foam', '#BFFFDF': 'Sea Mist', '#033D21': 'Dark Forrest', '#438059': 'Moss', '#7FA37C': 'Medium Green', '#007F40': 'Pine', '#8DAE94': 'Yellow Gray Green', '#ACC6B5': 'Aqua Lung', '#DDEBE2': 'Sea Vapor', '#00BFBF': 'Fog', '#00FFFF': 'Cyan', '#40FFFF': 'Turquoise Blue', '#80FFFF': 'Light Aqua', '#BFFFFF': 'Pale Cyan', '#033D3D': 'Dark Teal', '#347D7E': 'Gray Turquoise', '#609A9F': 'Green Blue', '#007F7F': 'Seaweed', '#96BDC4': 'Green Gray', '#B5D1D7': 'Soapstone', '#E2F1F4': 'Light Turquoise', '#0060BF': 'Summer Sky', '#0080FF': 'Sky Blue', '#40A0FF': 'Electric Blue', '#80C0FF': 'Light Azure', '#BFDFFF': 'Ice Blue', '#1B2C48': 'Navy', '#385376': 'Biscay', '#57708F': 'Dusty Blue', '#00407F': 'Sea Blue', '#7792AC': 'Sky Blue Gray', '#A8BED1': 'Morning Sky', '#DEEBF6': 'Vapor', '#0000BF': 'Deep Blue', '#0000FF': 'Blue', '#4040FF': 'Cerulean Blue', '#8080FF': 'Evening Blue', '#BFBFFF': 'Light Blue', '#212143': 'Deep Indigo', '#373E68': 'Sea Blue', '#444F75': 'Night Blue', '#00007F': 'Indigo Blue', '#585E82': 'Dockside', '#8687A4': 'Blue Gray', '#D2D1E1': 'Light Blue Gray', '#6000BF': 'Neon Violet', '#8000FF': 'Blue Violet', '#A040FF': 'Violet Purple', '#C080FF': 'Violet Dusk', '#DFBFFF': 'Pale Lavender', '#302449': 'Cool Shale', '#54466F': 'Dark Indigo', '#655A7F': 'Dark Violet', '#40007F': 'Violet', '#726284': 'Smoky Violet', '#9E8FA9': 'Slate Gray', '#DCD1DF': 'Violet White', '#BF00BF': 'Royal Violet', '#FF00FF': 'Fuchsia', '#FF40FF': 'Magenta', '#FF80FF': 'Orchid', '#FFBFFF': 'Pale Magenta', '#4A234A': 'Dark Purple', '#794A72': 'Medium Purple', '#936386': 'Cool Granite', '#7F007F': 'Purple', '#9D7292': 'Purple Moon', '#C0A0B6': 'Pale Purple', '#ECDAE5': 'Pink Cloud', '#BF005F': 'Hot Pink', '#FF007F': 'Deep Pink', '#FF409F': 'Grape', '#FF80BF': 'Electric Pink', '#FFBFDF': 'Pink', '#451528': 'Purple Red', '#823857': 'Purple Dino', '#A94A76': 'Purple Gray', '#7F003F': 'Rose', '#BC6F95': 'Antique Mauve', '#D8A5BB': 'Cool Marble', '#F7DDE9': 'Pink Granite', '#C00000': 'Apple', '#FF0000': 'Fire Truck', '#FF4040': 'Pale Red', '#FF8080': 'Salmon', '#FFC0C0': 'Warm Pink', '#441415': 'Sepia', '#82393C': 'Rust', '#AA4D4E': 'Brick', '#800000': 'Brick Red', '#BC6E6E': 'Mauve', '#D8A3A4': 'Shrimp Pink', '#F8DDDD': 'Shell Pink', '#BF5F00': 'Dark Orange', '#FF7F00': 'Orange', '#FF9F40': 'Grapefruit', '#FFBF80': 'Canteloupe', '#FFDFBF': 'Wax', '#482C1B': 'Dark Brick', '#855A40': 'Dirt', '#B27C51': 'Tan', '#7F3F00': 'Nutmeg', '#C49B71': 'Mustard', '#E1C4A8': 'Pale Tan', '#FDEEE0': 'Marble' /* }}} */ }, /** * @property _colorPicker * @description The HTML Element containing the colorPicker * @type HTMLElement */ _colorPicker: null, /** * @property STR_COLLAPSE * @description String for Toolbar Collapse Button * @type String */ STR_COLLAPSE: 'Collapse Toolbar', /** * @property STR_SPIN_LABEL * @description String for spinbutton dynamic label. Note the {VALUE} will be replaced with YAHOO.lang.substitute * @type String */ 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.', /** * @property STR_SPIN_UP * @description String for spinbutton up * @type String */ STR_SPIN_UP: 'Click to increase the value of this input', /** * @property STR_SPIN_DOWN * @description String for spinbutton down * @type String */ STR_SPIN_DOWN: 'Click to decrease the value of this input', /** * @property _titlebar * @description Object reference to the titlebar * @type HTMLElement */ _titlebar: null, /** * @property _disabled * @description Object to track button status when enabling/disabling the toolbar * @type Object */ _disabled: null, /** * @property browser * @description Standard browser detection * @type Object */ browser: YAHOO.env.ua, /** * @protected * @property _buttonList * @description Internal property list of current buttons in the toolbar * @type Array */ _buttonList: null, /** * @protected * @property _buttonGroupList * @description Internal property list of current button groups in the toolbar * @type Array */ _buttonGroupList: null, /** * @protected * @property _sep * @description Internal reference to the separator HTML Element for cloning * @type HTMLElement */ _sep: null, /** * @protected * @property _sepCount * @description Internal refernce for counting separators, so we can give them a useful class name for styling * @type Number */ _sepCount: null, /** * @protected * @property draghandle * @type HTMLElement */ _dragHandle: null, /** * @protected * @property _toolbarConfigs * @type Object */ _toolbarConfigs: { renderer: true }, /** * @protected * @property CLASS_CONTAINER * @description Default CSS class to apply to the toolbar container element * @type String */ CLASS_CONTAINER: 'yui-toolbar-container', /** * @protected * @property CLASS_DRAGHANDLE * @description Default CSS class to apply to the toolbar's drag handle element * @type String */ CLASS_DRAGHANDLE: 'yui-toolbar-draghandle', /** * @protected * @property CLASS_SEPARATOR * @description Default CSS class to apply to all separators in the toolbar * @type String */ CLASS_SEPARATOR: 'yui-toolbar-separator', /** * @protected * @property CLASS_DISABLED * @description Default CSS class to apply when the toolbar is disabled * @type String */ CLASS_DISABLED: 'yui-toolbar-disabled', /** * @protected * @property CLASS_PREFIX * @description Default prefix for dynamically created class names * @type String */ CLASS_PREFIX: 'yui-toolbar', /** * @method init * @description The Toolbar class's initialization method */ init: function(p_oElement, p_oAttributes) { YAHOO.widget.Toolbar.superclass.init.call(this, p_oElement, p_oAttributes); }, /** * @method initAttributes * @description Initializes all of the configuration attributes used to create * the toolbar. * @param {Object} attr Object literal specifying a set of * configuration attributes used to create the toolbar. */ initAttributes: function(attr) { YAHOO.widget.Toolbar.superclass.initAttributes.call(this, attr); var el = this.get('element'); this.addClass(this.CLASS_CONTAINER); /** * @config buttons * @description Object specifying the buttons to include in the toolbar * Example: *
* {
* { id: 'b3', type: 'button', label: 'Underline', value: 'underline' },
* { type: 'separator' },
* { id: 'b4', type: 'menu', label: 'Align', value: 'align',
* menu: [
* { text: "Left", value: 'alignleft' },
* { text: "Center", value: 'aligncenter' },
* { text: "Right", value: 'alignright' }
* ]
* }
* }
*
* buttons : [
* { type: 'button', value: 'test', value: 'testButton' }
* ]
* 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.
* @namespace YAHOO.widget * @requires yahoo, dom, element, event, toolbar, container, menu, button * @optional dragdrop, animation * @beta */ (function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, Lang = YAHOO.lang, DD = YAHOO.util.DD, Toolbar = YAHOO.widget.Toolbar; /** * 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. * @constructor * @class Editor * @extends YAHOO.util.Element * @param {String/HTMLElement} el The textarea element to turn into an editor. * @param {Object} attrs Object liternal containing configuration parameters. */ YAHOO.widget.Editor = function(el, attrs) { YAHOO.log('Editor Initalizing', 'info', 'Editor'); var oConfig = { element: null, attributes: (attrs || {}) } if (Lang.isString(el)) { oConfig.attributes.textarea = Dom.get(el); } var element_cont = document.createElement('DIV'); oConfig.attributes.element_cont = new YAHOO.util.Element(element_cont, { id: oConfig.attributes.textarea.id + '_container' }); oConfig.attributes.element_cont.setStyle('display', 'none'); oConfig.element = oConfig.attributes.textarea; var div = document.createElement('div'); oConfig.attributes.element_cont.appendChild(div); if (!oConfig.attributes.toolbar_cont) { oConfig.attributes.toolbar_cont = document.createElement('DIV'); oConfig.attributes.toolbar_cont.id = oConfig.attributes.textarea.id + '_toolbar'; div.appendChild(oConfig.attributes.toolbar_cont); } if (!oConfig.attributes.iframe) { oConfig.attributes.iframe = _createIframe(oConfig.attributes.textarea.id); var editorWrapper = document.createElement('DIV'); editorWrapper.appendChild(oConfig.attributes.iframe.get('element')); div.appendChild(editorWrapper); } Event.onDOMReady(function() { this.DOMReady = true; this.fireQueue(); }, this, true); YAHOO.widget.Editor.superclass.constructor.call(this, oConfig.element, oConfig.attributes); } /** * @private _cleanClassName * @description Makes a useable classname from dynamic data, by dropping it to lowercase and replacing spaces with -'s. * @param {String} str The classname to clean up * @returns {String} */ function _cleanClassName(str) { return str.replace(/ /g, '-').toLowerCase(); } /** * @private _createIframe * @description Creates the DOM and YUI Element for the iFrame editor area. * @param {String} id The string ID to prefix the iframe with * @returns {Object} iFrame object */ function _createIframe(id) { var ifrmID = id + '_editor'; var ifrmDom = document.createElement('iframe'); ifrmDom.id = ifrmID; var config = { border: '0', frameBorder: '0', marginWidth: '0', marginHeight: '0', leftMargin: '0', topMargin: '0', allowTransparency: 'true', width: '100%', src: 'javascript:false' } for (var i in config) { if (Lang.hasOwnProperty(config, i)) { ifrmDom.setAttribute(i, config[i]); } } var ifrm = new YAHOO.util.Element(ifrmDom); ifrm.setStyle('zIndex', '-1'); return ifrm; } YAHOO.extend(YAHOO.widget.Editor, YAHOO.util.Element, { /** * @property DOMReady * @private * @description Flag to determine if DOM is ready or not * @type Boolean */ DOMReady: null, /** * @property _selection * @private * @description Holder for caching iframe selections * @type Object */ _selection: null, /** * @property _mask * @private * @description DOM Element holder for the editor Mask when disabled * @type Object */ _mask: null, /** * @property _showingHiddenElements * @private * @description Status of the hidden elements button * @type Boolean */ _showingHiddenElements: null, /** * @property currentWindow * @description A reference to the currently open EditorWindow * @type Object */ currentWindow: null, /** * @property currentEvent * @description A reference to the current editor event * @type Event */ currentEvent: null, /** * @property operaEvent * @private * @description setTimeout holder for Opera and Image DoubleClick event.. * @type Object */ operaEvent: null, /** * @property currentFont * @description A reference to the last font selected from the Toolbar * @type HTMLElement */ currentFont: null, /** * @property currentElement * @description A reference to the current working element in the editor * @type Array */ currentElement: [], /** * @property dompath * @description A reference to the dompath container for writing the current working dom path to. * @type HTMLElement */ dompath: null, /** * @property beforeElement * @description A reference to the H2 placed before the editor for Accessibilty. * @type HTMLElement */ beforeElement: null, /** * @property afterElement * @description A reference to the H2 placed after the editor for Accessibilty. * @type HTMLElement */ afterElement: null, /** * @property invalidHTML * @description Contains a list of HTML elements that are invalid inside the editor. They will be removed when they are found. * @type Object */ invalidHTML: { form: true, input: true, button: true, select: true, link: true, html: true, body: true, script: true, style: true, textarea: true }, /** * @property toolbar * @description Local property containing the YAHOO.widget.Toolbar instance * @type YAHOO.widget.Toolbar */ toolbar: null, /** * @private * @property _contentTimer * @description setTimeout holder for documentReady check */ _contentTimer: null, /** * @private * @property _contentTimerCounter * @description Counter to check the number of times the body is polled for before giving up * @type Number */ _contentTimerCounter: 0, /** * @private * @property _disabled * @description The Toolbar items that should be disabled if there is no selection present in the editor. * @type Array */ _disabled: [ 'createlink', 'forecolor', 'backcolor', 'fontname', 'fontsize', 'superscript', 'subscript', 'removeformat', 'heading', 'indent', 'outdent' ], /** * @private * @property _alwaysDisabled * @description The Toolbar items that should ALWAYS be disabled event if there is a selection present in the editor. * @type Object */ _alwaysDisabled: { }, /** * @private * @property _alwaysEnabled * @description The Toolbar items that should ALWAYS be enabled event if there isn't a selection present in the editor. * @type Object */ _alwaysEnabled: { hiddenelements: true }, /** * @private * @property _semantic * @description The Toolbar commands that we should attempt to make tags out of instead of using styles. * @type Object */ _semantic: { 'bold': true, 'italic' : true, 'underline' : true }, /** * @private * @property _tag2cmd * @description A tag map of HTML tags to convert to the different types of commands so we can select the proper toolbar button. * @type Object */ _tag2cmd: { 'b': 'bold', 'strong': 'bold', 'i': 'italic', 'em': 'italic', 'u': 'underline', 'blockquote': 'formatblock', 'sup': 'superscript', 'sub': 'subscript', 'img': 'insertimage', 'a' : 'createlink', 'ul' : 'insertunorderedlist', 'ol' : 'insertorderedlist', 'indent' : 'indent', 'outdent' : 'outdent' }, /** * @private * @method _getDoc * @description Get the Document of the IFRAME * @return {Object} */ _getDoc: function() { //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) { var value = false; if (this.get) { if (this.get('iframe')) { if (this.get('iframe').get) { if (this.get('iframe').get('element')) { try { if (this.get('iframe').get('element').contentWindow) { if (this.get('iframe').get('element').contentWindow.document) { value = this.get('iframe').get('element').contentWindow.document; } } } catch (e) {} } } } } return value; }, /** * @private * @method _getWindow * @description Get the Window of the IFRAME * @return {Object} */ _getWindow: function() { return this.get('iframe').get('element').contentWindow; }, /** * @private * @method _focusWindow * @description Attempt to set the focus of the iframes window. * @param {Boolean} onLoad Safari needs some special care to set the cursor in the iframe */ _focusWindow: function(onLoad) { if (this.browser.webkit) { if (onLoad) { /** * @knownissue Safari Cursor Position * @browser Safari 2.x * @description Can't get Safari to place the cursor at the beginning of the text.. * This workaround at least set's the toolbar into the proper state. */ this._getSelection().setBaseAndExtent(this._getDoc().body, 0, this._getDoc().body, 1); this._getSelection().collapse(false); } else { this._getSelection().setBaseAndExtent(this._getDoc().body, 1, this._getDoc().body, 1); this._getSelection().collapse(false); } this._getWindow().focus(); //Check for.webkit3 if (this._getDoc().queryCommandEnabled('insertimage')) { this.browser.webkit3 = true; } } else { this._getWindow().focus(); } }, /** * @private * @method _hasSelection * @description Determines if there is a selection in the editor document. * @returns {Boolean} */ _hasSelection: function() { var sel = this._getSelection(); var range = this._getRange(); var hasSel = false; //Internet Explorer if (this.browser.ie || this.browser.opera) { if (range.text) { hasSel = true; } if (range.html) { hasSel = true; } } else { if ((sel != '') && (sel != undefined)) { hasSel = true; } } return hasSel; }, /** * @private * @method _getSelection * @description Handles the different selection objects across the A-Grade list. * @returns {Object} Selection Object */ _getSelection: function() { var _sel = null; if (this._getDoc() && this._getWindow()) { if (this._getDoc().selection) { _sel = this._getDoc().selection; } else { _sel = this._getWindow().getSelection(); } //Handle Safari's lack of Selection Object if (this.browser.webkit) { if (_sel.baseNode) { this._selection = new Object(); this._selection.baseNode = _sel.baseNode; this._selection.baseOffset = _sel.baseOffset; this._selection.extentNode = _sel.extentNode; this._selection.extentOffset = _sel.extentOffset; } else if (this._selection != null) { _sel = this._getWindow().getSelection(); _sel.setBaseAndExtent( this._selection.baseNode, this._selection.baseOffset, this._selection.extentNode, this._selection.extentOffset ); this._selection = null; } } } return _sel; }, /** * @private * @method _getRange * @description Handles the different range objects across the A-Grade list. * @returns {Object} Range Object */ _getRange: function(sel) { var sel = this._getSelection(); if (sel == null) { return null; } if (this.browser.webkit && !sel.getRangeAt) { var _range = this._getDoc().createRange(); try { _range.setStart(sel.anchorNode, sel.anchorOffset); _range.setEnd(sel.focusNode, sel.focusOffset); } catch (e) { _range = this._getWindow().getSelection()+''; } return _range; } if (this.browser.ie || this.browser.opera) { return sel.createRange(); } if (sel.rangeCount > 0) { return sel.getRangeAt(0); } return null; }, /** * @private * @method _setDesignMode * @description Sets the designMode of the iFrame document. * @param {String} state This should be either on or off */ _setDesignMode: function(state) { try { this._getDoc().designMode = state; } catch(e) { } }, /** * @private * @method _toggleDesignMode * @description Toggles the designMode of the iFrame document on and off. * @returns {String} The state that it was set to. */ _toggleDesignMode: function() { var _dMode = this._getDoc().designMode, _state = 'on'; if (_dMode == 'on') { _state = 'off'; } this._setDesignMode(_state); return _state; }, /** * @private * @method _initEditor * @description This method is fired from _checkLoaded when the document is ready. It turns on designMode and set's up the listeners. */ _initEditor: function() { YAHOO.log('editorLoaded', 'info', 'Editor'); if (this.browser.ie) { this._getDoc().body.style.margin = '0'; } this._setDesignMode('on'); this.toolbar.on('buttonClick', this._handleToolbarClick, this, true); //Setup Listeners on iFrame Event.addListener(this._getDoc(), 'mouseup', this._handleMouseUp, this, true); Event.addListener(this._getDoc(), 'mousedown', this._handleMouseDown, this, true); Event.addListener(this._getDoc(), 'click', this._handleClick, this, true); Event.addListener(this._getDoc(), 'dblclick', this._handleDoubleClick, this, true); Event.addListener(this._getDoc(), 'keypress', this._handleKeyPress, this, true); Event.addListener(this._getDoc(), 'keyup', this._handleKeyUp, this, true); Event.addListener(this._getDoc(), 'keydown', this._handleKeyDown, this, true); this.toolbar.set('disabled', false); this.fireEvent('editorContentLoaded', { type: 'editorLoaded', target: this }); if (this.get('dompath')) { var self = this; window.setTimeout(function() { self._writeDomPath.call(self); }, 150); } }, /** * @private * @method _checkLoaded * @description Called from a setTimeout loop to check if the iframes body.onload event has fired, then it will init the editor. */ _checkLoaded: function() { this._contentTimerCounter++; if (this._contentTimer) { window.clearTimeout(this._contentTimer); } if (this._contentTimerCounter > 250) { alert('ERROR: Body Did Not load'); return false; } if (this._getDoc() && this._getDoc().body && (this._getDoc().body._rteLoaded == true)) { //The onload event has fired, clean up after ourselves and fire the _initEditor method /* if (!this.browser.ie) { //IE Doesn't like this.. delete this._getDoc().body._rteLoaded; this._getDoc().body.removeAttribute('onload'); } */ this._initEditor(); } else { var self = this; this._contentTimer = window.setTimeout(function() { self._checkLoaded.call(self); }, 20); } }, /** * @private * @method _setInitialContent * @description This method will open the iframes content document and write the textareas value into it, then start the body.onload checking. */ _setInitialContent: function() { YAHOO.log('Body of editor populated with contents of the text area', 'info', 'Editor'); var title = this.STR_TITLE; var html = this.get('html'); html = html.replace('{TITLE}', title); html = html.replace('{CONTENT}', this.get('textarea').value); html = html.replace('{CSS}', this.get('css')); html = html.replace('{HIDDEN_CSS}', this.get('hiddencss')); this._getDoc().open(); this._getDoc().write(html); this._getDoc().close(); this._checkLoaded(); }, /** * @private * @method _setMarkupType * @param {String} action The action to take. Possible values are: css, default or semantic * @description This method will turn on/off the useCSS execCommand. */ _setMarkupType: function(action) { switch (this.get('markup')) { case 'css': this._setEditorStyle(true); break; case 'default': this._setEditorStyle(false); break; case 'semantic': if (this._semantic[action]) { this._setEditorStyle(false); } else { this._setEditorStyle(true); } break; } }, /** * Set the editor to use CSS instead of HTML * @param {Booleen} stat True/False */ _setEditorStyle: function(stat) { try { this._getDoc().execCommand('useCSS', false, !stat); } catch (ex) { } }, /** * @private * @method _getSelectedElement * @description This method will attempt to locate the element that was last interacted with, either via selection, location or event. * @returns {HTMLElement} The currently selected element. */ _getSelectedElement: function() { var doc = this._getDoc(); if (this.browser.ie) { var range = this._getRange(), elm = null; if (range) { elm = range.item ? range.item(0) : range.parentElement(); if (elm == doc.body) { elm = null; } } } else { var sel = this._getSelection(), range = this._getRange(), elm = null; if (!sel || !range) { return null; } if (sel != '') { if (sel.anchorNode && (sel.anchorNode.nodeType == 3)) { if (sel.anchorNode.parentNode) { //next check parentNode elm = sel.anchorNode.parentNode; } if (sel.anchorNode.nextSibling != sel.focusNode.nextSibling) { elm = sel.anchorNode.nextSibling; } } if (elm && elm.tagName && (elm.tagName.toLowerCase() == 'br')) { elm = null; } if (!elm) { elm = range.commonAncestorContainer; if (!range.collapsed) { if (range.startContainer == range.endContainer) { if (range.startOffset - range.endOffset < 2) { if (range.startContainer.hasChildNodes()) { elm = range.startContainer.childNodes[range.startOffset]; } } } } } //Safari Fix if (!elm) { if (this.currentEvent) { //elm = Event.getTarget(this.currentEvent); } } } } if (!elm && (this.currentElement[0] || this.currentEvent)) { if (this.currentEvent && (this.currentEvent.keyCode == undefined) && Event.getTarget(this.currentEvent)) { elm = Event.getTarget(this.currentEvent); } else if (this.currentEvent && (this.currentEvent.keyCode != undefined) && Event.getTarget(this.currentEvent)) { } else { elm = this.currentElement[0]; } } else if ((elm == this._getDoc().body) && this.currentElement[0] && !this._hasSelection()) { elm = this.currentElement[0]; } if (this.browser.opera || this.browser.webkit) { if (this.currentEvent && !elm) { elm = Event.getTarget(this.currentEvent); } } if (!elm || !elm.tagName) { elm = doc.body; } if (elm && elm.tagName && elm.tagName.toLowerCase() == 'html') { //Safari sometimes gives us the HTML node back.. elm = doc.body; } return elm; }, /** * @private * @method _getDomPath * @description This method will attempt to build the DOM path from the currently selected element. * @returns {Array} An array of node references that will create the DOM Path. */ _getDomPath: function() { var el = this._getSelectedElement(); var domPath = []; while (el!= null) { if (el.ownerDocument != this._getDoc()) { return false; } //Check to see if we get el.nodeName and nodeType if (el.nodeName && (el.nodeType == 1)) { domPath[domPath.length] = el; } if (el.nodeName.toUpperCase() == "BODY") { break; } el = el.parentNode; } if (domPath.length == 0) { if (this._getDoc() && this._getDoc().body) { domPath[0] = this._getDoc().body; } } return domPath.reverse(); }, /** * @private * @method _writeDomPath * @description Write the current DOM path out to the dompath container below the editor. */ _writeDomPath: function() { var path = this._getDomPath(), pathArr = []; for (var i = 0; i < path.length; i++) { var tag = path[i].tagName.toLowerCase(); if ((tag == 'ol') && (path[i].type)) { tag += ':' + path[i].type; } if (Dom.hasClass(path[i], 'yui-tag')) { tag = path[i].getAttribute('tag'); } if ((this.get('markup') == 'semantic')) { switch (tag) { case 'b': tag = 'strong'; break; case 'i': tag = 'em'; break; } } if (!Dom.hasClass(path[i], 'yui-non')) { if (Dom.hasClass(path[i], 'yui-tag')) { var pathStr = tag; if (tag == 'a') { if (path[i].getAttribute('href')) { pathStr += ':' + path[i].getAttribute('href').replace('mailto:', '').replace('http:/'+'/', '').replace('https:/'+'/', ''); //May need to add others here ftp } } } else { var classPath = ((path[i].className != '') ? '.' + path[i].className.replace(/ /g, '.') : ''); if ((classPath.indexOf('yui') != -1) || (classPath.toLowerCase().indexOf('apple-style-span') != -1)) { classPath = ''; } var pathStr = tag + ((path[i].id) ? '#' + path[i].id : '') + classPath; } if (pathStr.length > 10) { pathStr = pathStr.substring(0, 10) + '...'; } pathArr[pathArr.length] = pathStr; } } var str = pathArr.join(' ' + this.SEP_DOMPATH + ' '); //Prevent flickering if (this.dompath.innerHTML != str) { this.dompath.innerHTML = str; } }, /** * @private * @method _fixNodes * @description Fix href and imgs as well as remove invalid HTML. */ _fixNodes: function() { for (var i in this.invalidHTML) { if (Lang.hasOwnProperty(this.invalidHTML, i)) { var tags = this._getDoc().body.getElementsByTagName(i); for (var h = 0; h < tags.length; h++) { if (tags[h].parentNode) { tags[h].parentNode.removeChild(tags[h]); } } } } var as = this._getDoc().body.getElementsByTagName('a'); if (as.length) { YAHOO.log('Found an A tag in the document, converting to span holder', 'info', 'Editor'); for (var i = 0; i < as.length; i++) { var el = this._getDoc().createElement('span'); Dom.addClass(el, 'yui-tag-a'); Dom.addClass(el, 'yui-tag'); el.innerHTML = as[i].innerHTML; el.setAttribute('tag', 'a'); el.setAttribute('href', as[i].getAttribute('href')); if (as[i].getAttribute('target') != null) { el.setAttribute('target', as[i].getAttribute('target')); } as[i].parentNode.replaceChild(el, as[i]); as[i] = null; } } var imgs = this._getDoc().getElementsByTagName('img'); Dom.addClass(imgs, 'yui-img'); for (var i = 0; i < imgs.length; i++) { if (imgs[i].getAttribute('href', 2)) { var url = imgs[i].getAttribute('src', 2); if ((url != '') && ((url.indexOf('file:/') != -1) || (url.indexOf(':\\') != -1))) { Dom.addClass(imgs[i], this.CLASS_LOCAL_FILE); } else { Dom.removeClass(imgs[i], this.CLASS_LOCAL_FILE); } } } var fakeAs = this._getDoc().body.getElementsByTagName('span'); for (var i = 0; i < fakeAs.length; i++) { if (fakeAs[i].getAttribute('href', 2)) { var url = fakeAs[i].getAttribute('href', 2); if ((url != '') && ((url.indexOf('file:/') != -1) || (url.indexOf(':\\') != -1))) { Dom.addClass(fakeAs[i], this.CLASS_LOCAL_FILE); } else { Dom.removeClass(fakeAs[i], this.CLASS_LOCAL_FILE); } } } }, /** * @private * @method _showHidden * @description Toggle on/off the hidden.css file. */ _showHidden: function() { if (this._showingHiddenElements) { YAHOO.log('Enabling hidden CSS File', 'info', 'Editor'); this._showingHiddenElements = false; this.toolbar.deselectButton(this.toolbar.getButtonByValue('hiddenelements')); Dom.removeClass(this._getDoc().body, this.CLASS_HIDDEN); } else { YAHOO.log('Disabling hidden CSS File', 'info', 'Editor'); this._showingHiddenElements = true; Dom.addClass(this._getDoc().body, this.CLASS_HIDDEN); this.toolbar.selectButton(this.toolbar.getButtonByValue('hiddenelements')); } }, /** * @private * @method _setCurrentEvent * @param {Event} ev The event to cache * @description Sets the current event property */ _setCurrentEvent: function(ev) { if (ev && ev.type) { YAHOO.log('Event: ' + ev.type, 'info', 'Editor'); } this.currentEvent = ev; }, /** * @private * @method _handleClick * @param {Event} ev The event we are working on. * @description Handles all click events inside the iFrame document. */ _handleClick: function(ev) { this._setCurrentEvent(ev); if (this.currentWindow) { this.closeWindow(); } if (!this.browser.webkit) { this.nodeChange(); } }, /** * @private * @method _handleMouseUp * @param {Event} ev The event we are working on. * @description Handles all mouseup events inside the iFrame document. */ _handleMouseUp: function(ev) { this._setCurrentEvent(ev); if (this.browser.opera) { /** * @knownissue Opera appears to stop the MouseDown, Click and DoubleClick events on an image inside of a document with designMode on.. * @browser Opera * @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. */ var sel = Event.getTarget(ev); if (sel && sel.tagName && (sel.tagName.toLowerCase() == 'img')) { this.nodeChange(); var self = this; if (this.operaEvent) { clearTimeout(this.operaEvent); this.operaEvent = null; this._handleDoubleClick(ev); } else { this.operaEvent = window.setTimeout(function() { self.operaEvent = false; }, 200); } } } //This will stop Safari from selecting the entire document if you select all the text in the editor if (this.browser.webkit || this.browser.opera) { if (this.browser.webkit) { Event.stopEvent(ev); } } this.nodeChange(); this.fireEvent('editorMouseUp', { type: 'editorMouseUp', target: this, ev: ev }); }, /** * @private * @method _handleMouseDown * @param {Event} ev The event we are working on. * @description Handles all mousedown events inside the iFrame document. */ _handleMouseDown: function(ev) { this._setCurrentEvent(ev); var sel = Event.getTarget(ev); if (sel && sel.tagName && (sel.tagName.toLowerCase() == 'img')) { if (this.browser.webkit) { this.nodeChange(); Event.stopEvent(ev); } } //this.nodeChange(); this.fireEvent('editorMouseDown', { type: 'editorMouseDown', target: this, ev: ev }); }, /** * @private * @method _handleDoubleClick * @param {Event} ev The event we are working on. * @description Handles all doubleclick events inside the iFrame document. */ _handleDoubleClick: function(ev) { this._setCurrentEvent(ev); var sel = Event.getTarget(ev); if (sel && sel.tagName && (sel.tagName.toLowerCase() == 'img')) { this.currentElement[0] = sel; this.toolbar.fireEvent('insertimageClick', { type: 'insertimageClick', target: this.toolbar }); this.fireEvent('afterExecCommand', { type: 'afterExecCommand', target: this }); } else if (sel && sel.getAttribute && sel.getAttribute('tag') && (sel.getAttribute('tag').toLowerCase() == 'a')) { this.currentElement[0] = sel; this.toolbar.fireEvent('createlinkClick', { type: 'createlinkClick', target: this.toolbar }); this.fireEvent('afterExecCommand', { type: 'afterExecCommand', target: this }); } this.nodeChange(); this.fireEvent('editorDoubleClick', { type: 'editorDoubleClick', target: this, ev: ev }); }, /** * @private * @method _handleKeyUp * @param {Event} ev The event we are working on. * @description Handles all keyup events inside the iFrame document. */ _handleKeyUp: function(ev) { this._setCurrentEvent(ev); switch (ev.keyCode) { case 37: //Left Arrow case 38: //Up Arrow case 39: //Right Arrow case 40: //Down Arrow case 46: //Forward Delete case 8: //Delete case 65: //The letter a (for ctrl + a and cmd + a) case 27: //Escape key if window is open if ((ev.keyCode == 27) && this.currentWindow) { this.closeWindow(); } this.nodeChange(); break; } this.fireEvent('editorKeyUp', { type: 'editorKeyUp', target: this, ev: ev }); }, /** * @private * @method _handleKeyPress * @param {Event} ev The event we are working on. * @description Handles all keypress events inside the iFrame document. */ _handleKeyPress: function(ev) { this._setCurrentEvent(ev); this.fireEvent('editorKeyPress', { type: 'editorKeyPress', target: this, ev: ev }); }, /** * @private * @method _handleKeyDown * @param {Event} ev The event we are working on. * @description Handles all keydown events inside the iFrame document. */ _handleKeyDown: function(ev) { this._setCurrentEvent(ev); if (this.currentWindow) { this.closeWindow(); } var doExec = false; var action = null; //if (ev.ctrlKey) { if (ev.shiftKey && ev.ctrlKey) { doExec = true; } switch (ev.keyCode) { case 84: //Focus Toolbar Header -- Ctrl + Shift + T if (ev.shiftKey && ev.ctrlKey) { this.toolbar._titlebar.firstChild.focus(); Event.stopEvent(ev); doExec = false; } break; case 27: //Focus After Element - Ctrl + Shift + Esc if (ev.shiftKey) { this.afterElement.focus(); Event.stopEvent(ev); exec = false; } break; case 219: //Left action = 'justifyleft'; break; case 220: //Center action = 'justifycenter'; break; case 221: //Right action = 'justifyright'; break; case 76: //L if (this._hasSelection()) { this.execCommand('createlink', ''); this.toolbar.fireEvent('createlinkClick', { type: 'createlinkClick', target: this.toolbar }); this.fireEvent('afterExecCommand', { type: 'afterExecCommand', target: this }); doExec = false; } break; case 66: //B action = 'bold'; break; case 73: //I action = 'italic'; break; case 85: //U action = 'underline'; break; case 9: //Tab Key if (this.browser.safari) { this._getDoc().execCommand('inserttext', false, '\t'); Event.stopEvent(ev); } break; case 13: if (this.browser.ie) { //Insert athis.CLASS_HIDDEN
* @default
.hidden div, .hidden p, .hidden span, .hidden img {
border: 1px dotted #ccc;
}
.hidden .yui-non {
border: none;
}
.hidden img {
padding: 2px;
}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;
}{TITLE}, {CSS}, {HIDDEN_CSS} and {CONTENT} need to be there, they are passed to YAHOO.lang.substitute to be replace with other strings.
onload="document.body._rteLoaded = true;" : the onload statement must be there or the editor will not finish loading.
<!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>
* @type String
*/
this.setAttributeConfig('html', {
value: attr.html || 'execCommand('fontname', false, 'yui-tmp') on the given selection.
* It will then search the document for a span with the font-family set to yui-tmp and replace that with another span that has other information in it, then assign the new span to
* this.currentElement, 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.
*/
_createCurrentElement: function(tagName, tagStyle) {
var tagName = ((tagName) ? tagName : 'a'),
sel = this._getSelection(),
tar = null,
el = [],
_doc = this._getDoc();
if (this.currentFont) {
if (!tagStyle) {
tagStyle = {};
}
tagStyle.fontFamily = this.currentFont;
this.currentFont = null;
}
this.currentElement = [];
var _elCreate = function() {
switch (tagName) {
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6':
var el = _doc.createElement(tagName);
break;
default:
var el = _doc.createElement('span');
YAHOO.util.Dom.addClass(el, 'yui-tag-' + tagName);
YAHOO.util.Dom.addClass(el, 'yui-tag');
el.setAttribute('tag', tagName);
el.tabIndex = 1;
for (var i in tagStyle) {
if (YAHOO.util.Lang.hasOwnProperty(tagStyle, i)) {
el.style[i] = tagStyle[i];
}
}
break;
}
return el;
};
if (!this._hasSelection()) {
if (this._getDoc().queryCommandEnabled('insertimage')) {
this._getDoc().execCommand('insertimage', false, 'yui-tmp-img');
var imgs = this._getDoc().getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].getAttribute('src', 2) == 'yui-tmp-img') {
el = _elCreate();
imgs[i].parentNode.replaceChild(el, imgs[i]);
this.currentElement[this.currentElement.length] = el;
//this.currentElement = el;
}
}
} else {
if (this.currentEvent) {
tar = YAHOO.util.Event.getTarget(this.currentEvent);
} else {
//For Safari..
tar = this._getDoc().body;
}
}
if (tar) {
/**
* @knownissue
* @browser Safari 2.x
* @description The issue here is that we have no way of knowing where the cursor position is
* inside of the iframe, so we have to place the newly inserted data in the best place that we can.
*/
el = _elCreate();
if (tar.tagName.toLowerCase() == 'body') {
tar.appendChild(el);
} else if (tar.nextSibling) {
tar.parentNode.insertBefore(el, tar.nextSibling);
} else {
tar.parentNode.appendChild(el);
}
//this.currentElement = el;
this.currentElement[this.currentElement.length] = el;
this.currentEvent = null;
if (this.browser.webkit) {
//Force Safari to focus the new element
this._getSelection().setBaseAndExtent(el, 0, el, 0);
this._getSelection().collapse(true);
}
}
} else {
//Force CSS Styling for this action...
this._setEditorStyle(true);
this._getDoc().execCommand('fontname', false, 'yui-tmp');
var _tmp = [];
/* TODO: This needs to be cleaned up.. */
var _tmp1 = this._getDoc().getElementsByTagName('font');
var _tmp2 = this._getDoc().getElementsByTagName(this._getSelectedElement().tagName);
var _tmp3 = this._getDoc().getElementsByTagName('span');
var _tmp4 = this._getDoc().getElementsByTagName('i');
var _tmp5 = this._getDoc().getElementsByTagName('b');
for (var e = 0; e < _tmp1.length; e++) {
_tmp[_tmp.length] = _tmp1[e];
}
for (var e = 0; e < _tmp2.length; e++) {
_tmp[_tmp.length] = _tmp2[e];
}
for (var e = 0; e < _tmp3.length; e++) {
_tmp[_tmp.length] = _tmp3[e];
}
for (var e = 0; e < _tmp4.length; e++) {
_tmp[_tmp.length] = _tmp4[e];
}
for (var e = 0; e < _tmp5.length; e++) {
_tmp[_tmp.length] = _tmp5[e];
}
for (var i = 0; i < _tmp.length; i++) {
if ((YAHOO.util.Dom.getStyle(_tmp[i], 'font-family') == 'yui-tmp') || (_tmp[i].face && (_tmp[i].face == 'yui-tmp'))) {
var el = _elCreate();
el.innerHTML = _tmp[i].innerHTML;
if (_tmp[i].parentNode) {
_tmp[i].parentNode.replaceChild(el, _tmp[i]);
//this.currentElement = el;
this.currentElement[this.currentElement.length] = el;
this.currentEvent = null;
if (this.browser.webkit) {
//Force Safari to focus the new element
this._getSelection().setBaseAndExtent(el, 0, el, 0);
this._getSelection().collapse(true);
}
if (this.browser.ie && tagStyle && tagStyle.fontSize) {
this._getSelection().empty();
}
if (this.browser.gecko) {
this._getSelection().collapseToStart();
}
}
}
}
var len = this.currentElement.length;
for (var i = 0; i < len; i++) {
if ((i + 1) != len) { //Skip the last one in the list
if (this.currentElement[i] && this.currentElement[i].nextSibling) {
if (this.currentElement[i].tagName && (this.currentElement[i].tagName.toLowerCase() != 'br')) {
this.currentElement[this.currentElement.length] = this.currentElement[i].nextSibling;
}
}
}
}
}
},
/**
* @method saveHTML
* @description Cleans the HTML with the cleanHTML method then places that string back into the textarea.
*/
saveHTML: function() {
var html = this.cleanHTML();
this.get('textarea').value = html;
return html;
},
/**
* @method setEditorHTML
* @param {String} html The html content to load into the editor
* @description Loads HTML into the editors body
*/
setEditorHTML: function(html) {
this._getDoc().body.innerHTML = html;
this.nodeChange();
},
/**
* @method getEditorHTML
* @description Gets the unprocessed/unfiltered HTML from the editor
*/
getEditorHTML: function() {
return this._getDoc().body.innerHTML;
},
/**
* @method cleanHTML
* @param {String} html The unfiltered HTML
* @description Process the HTML with a few regexes to clean it up and stabilize the output
* @returns {String} The filtered HTML
*/
cleanHTML: function(html) {
//Start Filtering Output
//Begin RegExs..
if (!html) {
var html = this.getEditorHTML();
}
//Make some backups...
html = html.replace(/( | )<\/p>/g, ' <\/p>/gi, '
<\/p>/gi, '
/gi, '
/gi, '
');
html = html.replace(/