editor-base.js revision 9a68201f57ed1257e4735227620d7ec556fe99e5
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Base class for Editor. Handles the business logic of Editor, no GUI involved only utility methods and events.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @module editor
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @submodule editor-base
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Base class for Editor. Handles the business logic of Editor, no GUI involved only utility methods and events.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @class EditorBase
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * @for EditorBase
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @extends Base
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @constructor
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass var EditorBase = function() {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass EditorBase.superclass.constructor.apply(this, arguments);
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Internal reference to the Y.Frame instance
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @property frame
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass initializer: function() {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass frame.after('ready', Y.bind(this._afterFrameReady, this));
b7bd9aa409761c479bb0a2e5794295d35ebe24eaDav Glass destructor: function() {
b7bd9aa409761c479bb0a2e5794295d35ebe24eaDav Glass * Copy certain styles from one node instance to another (used for new paragraph creation mainly)
b7bd9aa409761c479bb0a2e5794295d35ebe24eaDav Glass * @method copyStyles
b7bd9aa409761c479bb0a2e5794295d35ebe24eaDav Glass * @param {Node} from The Node instance to copy the styles from
b7bd9aa409761c479bb0a2e5794295d35ebe24eaDav Glass * @param {Node} to The Node instance to copy the styles to
f8b3e367f0b400ff8b4feeb35c56d9387a31f9e0Dav Glass var styles = ['color', 'fontSize', 'fontFamily', 'backgroundColor', 'fontStyle' ],
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * The default handler for the nodeChange event.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @method _defNodeChangeFn
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @param {Event} e The event
a2621d519886de7d60c30c5a0850f5c17fd2fb36Dav Glass //Y.log('Default nodeChange function: ' + e.changedType, 'info', 'editor');
323ca860aba4b2515b560796e2322d5eaae57e5aDav Glass * This whole method needs to be fixed and made more dynamic.
323ca860aba4b2515b560796e2322d5eaae57e5aDav Glass * Maybe static functions for the e.changeType and an object bag
323ca860aba4b2515b560796e2322d5eaae57e5aDav Glass * to walk through and filter to pass off the event to before firing..
9002d9b85f99bb503c702f12a20f829f732d22f8Dav Glass case 'enter':
9002d9b85f99bb503c702f12a20f829f732d22f8Dav Glass //Webkit doesn't support shift+enter as a BR, this fixes that.
a2621d519886de7d60c30c5a0850f5c17fd2fb36Dav Glass if (!e.changedNode.test('li, li *') && !e.changedEvent.shiftKey) {
a2621d519886de7d60c30c5a0850f5c17fd2fb36Dav Glass Y.log('Overriding TAB key to insert HTML', 'info', 'editor');
f8b3e367f0b400ff8b4feeb35c56d9387a31f9e0Dav Glass case 'enter-up':
f8b3e367f0b400ff8b4feeb35c56d9387a31f9e0Dav Glass var prev = e.changedNode.previous(), lc, lc2, found = false;
b80d65233fd7492f4b6487349f5364b9a8ca019eDav Glass //Bold and Italic styles
b80d65233fd7492f4b6487349f5364b9a8ca019eDav Glass if (s.textDecoration.toLowerCase() == 'underline') {
b80d65233fd7492f4b6487349f5364b9a8ca019eDav Glass if (s.textDecoration.toLowerCase() == 'line-through') {
5cbdc947eb0c9c5e840d59ff8e1dd49a0e2a1887Dav Glass var family2 = n.getStyle('fontFamily').split(',')[0].toLowerCase();
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass fColor = EditorBase.FILTER_RGB(n.getStyle('color'));
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass var bColor2 = EditorBase.FILTER_RGB(n.getStyle('backgroundColor'));
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass //TODO Dont' like this, not dynamic enough..
b80d65233fd7492f4b6487349f5364b9a8ca019eDav Glass * Walk the dom tree from this node up to body, returning a reversed array of parents.
b80d65233fd7492f4b6487349f5364b9a8ca019eDav Glass * @method getDomPath
b80d65233fd7492f4b6487349f5364b9a8ca019eDav Glass * @param {Node} node The Node to start from
b80d65233fd7492f4b6487349f5364b9a8ca019eDav Glass while (node !== null) {
573bad453b98b1e493f4abfcf507f85b22b6bf4aDav Glass if (node.test('html') || node.test('doc') || !node.get('tagName')) {
b80d65233fd7492f4b6487349f5364b9a8ca019eDav Glass //Check to see if we get el.nodeName and nodeType
b80d65233fd7492f4b6487349f5364b9a8ca019eDav Glass if (node.get('nodeName') && node.get('nodeType') && (node.get('nodeType') == 1)) {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * After frame ready, bind mousedown & keyup listeners
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @method _afterFrameReady
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass this.frame.on('mousedown', Y.bind(this._onFrameMouseDown, this));
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass this.frame.on('keyup', Y.bind(this._onFrameKeyUp, this));
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass this.frame.on('keydown', Y.bind(this._onFrameKeyDown, this));
323ca860aba4b2515b560796e2322d5eaae57e5aDav Glass this.frame.on('keypress', Y.bind(this._onFrameKeyPress, this));
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Fires nodeChange event
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @method _onFrameMouseDown
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass this.fire('nodeChange', { changedNode: e.frameTarget, changedType: 'mousedown', changedEvent: e });
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Fires nodeChange event for keyup on specific keys
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @method _onFrameKeyUp
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass _onFrameKeyUp: function(e) {
7058d70d5189510fab628ef8d64bb50dd726a941Dav Glass this.fire('nodeChange', { changedNode: sel.anchorNode, changedType: 'keyup', selection: sel, changedEvent: e });
f8b3e367f0b400ff8b4feeb35c56d9387a31f9e0Dav Glass this.fire('nodeChange', { changedNode: sel.anchorNode, changedType: EditorBase.NC_KEYS[e.keyCode] + '-up', selection: sel, changedEvent: e });
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Fires nodeChange event
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @method _onFrameKeyDown
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass _onFrameKeyDown: function(e) {
7058d70d5189510fab628ef8d64bb50dd726a941Dav Glass this.fire('nodeChange', { changedNode: sel.anchorNode, changedType: 'keydown', changedEvent: e });
7058d70d5189510fab628ef8d64bb50dd726a941Dav Glass this.fire('nodeChange', { changedNode: sel.anchorNode, changedType: EditorBase.NC_KEYS[e.keyCode], changedEvent: e });
7058d70d5189510fab628ef8d64bb50dd726a941Dav Glass this.fire('nodeChange', { changedNode: sel.anchorNode, changedType: EditorBase.NC_KEYS[e.keyCode] + '-down', changedEvent: e });
b7bd9aa409761c479bb0a2e5794295d35ebe24eaDav Glass * Fires nodeChange event
b7bd9aa409761c479bb0a2e5794295d35ebe24eaDav Glass * @method _onFrameKeyPress
323ca860aba4b2515b560796e2322d5eaae57e5aDav Glass this.fire('nodeChange', { changedNode: sel.anchorNode, changedType: 'keypress', changedEvent: e });
323ca860aba4b2515b560796e2322d5eaae57e5aDav Glass this.fire('nodeChange', { changedNode: sel.anchorNode, changedType: EditorBase.NC_KEYS[e.keyCode] + '-press', changedEvent: e });
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Pass through to the frame.execCommand method
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @method execCommand
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @param {String} cmd The command to pass: inserthtml, insertimage, bold
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @param {String} val The optional value of the command: Helvetica
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @return {Node/NodeList} The Node or Nodelist affected by the command. Only returns on override commands, not browser defined commands.
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass e = { changedNode: sel.anchorNode, changedType: 'execcommand', nodes: ret };
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass case 'forecolor':
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass case 'backcolor':
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass case 'fontsize':
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass case 'fontname':
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Get the YUI instance of the frame
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @method getInstance
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @return {YUI} The YUI instance bound to the frame.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass getInstance: function() {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Renders the Y.Frame to the passed node.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @method render
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @param {Selector/HTMLElement/Node} node The node to append the Editor to
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @return {EditorBase}
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @chainable
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass return this;
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Focus the contentWindow of the iframe
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @method focus
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @return {EditorBase}
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @chainable
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass focus: function() {
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass return this;
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass * Handles the showing of the Editor instance. Currently only handles the iframe
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass * @method show
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass * @return {EditorBase}
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass * @chainable
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass show: function() {
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass return this;
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass * Handles the hiding of the Editor instance. Currently only handles the iframe
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass * @method hide
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass * @return {EditorBase}
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass * @chainable
a0c3229e02af852e4b15bf6d4cf4e862440bb00eDav Glass hide: function() {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass return this;
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * (Un)Filters the content of the Editor, cleaning YUI related code. //TODO better filtering
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @method getContent
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @return {String} The filtered content of the Editor
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass getContent: function() {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass //Removing the _yuid from the objects in IE
9f2068537ef4a78d9a11fb5a136991d9d9e059a0Dav Glass * @property TABKEY
9f2068537ef4a78d9a11fb5a136991d9d9e059a0Dav Glass * @description The HTML markup to use for the tabkey
9f2068537ef4a78d9a11fb5a136991d9d9e059a0Dav Glass TABKEY: '<span class="tab"> </span>',
9f2068537ef4a78d9a11fb5a136991d9d9e059a0Dav Glass * @method FILTER_RGB
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass * @param String css The CSS string containing rgb(#,#,#);
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass * @description Converts an RGB color string to a hex color, example: rgb(0, 255, 0) converts to #00ff00
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass * @return String
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass var exp = new RegExp("(.*?)rgb\\s*?\\(\\s*?([0-9]+).*?,\\s*?([0-9]+).*?,\\s*?([0-9]+).*?\\)(.*?)", "gi");
24e95e1c11b518e1aaaa7f04882febe32de00b5eDav Glass var rgb = css.replace(exp, "$1,$2,$3,$4,$5").split(',');
9f2068537ef4a78d9a11fb5a136991d9d9e059a0Dav Glass * @property TAG2CMD
9f2068537ef4a78d9a11fb5a136991d9d9e059a0Dav Glass * @description A hash table of tags to their execcomand's
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Hash table of keys to fire a nodeChange event for.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @property NC_KEYS
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @type Object
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * The default modules to use inside the Frame
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @property USE
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @type Array
9a68201f57ed1257e4735227620d7ec556fe99e5Dav Glass USE: ['substitute', 'node', 'selector-css3', 'selection', 'stylesheet'],
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * The Class Name: editorBase
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @property NAME
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Editor Strings
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @property STRINGS
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * Title of frame document: Rich Text Editor
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @property STRINGS.title
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * The content to load into the Editor Frame
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @attribute content
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass Y.log('Stripping first carriage return from content before injecting', 'warn', 'editor');
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass getter: function() {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * The value of the dir attribute on the HTML element of the frame. Default: ltr
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @attribute dir
f69da96c272d2efe7f43da5150c13c0fe6899646Dav Glass * @attribute extracss
f69da96c272d2efe7f43da5150c13c0fe6899646Dav Glass * @description A string of CSS to add to the Head of the Editor
f69da96c272d2efe7f43da5150c13c0fe6899646Dav Glass * @type String
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @event nodeChange
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @description Fired from mouseup & keyup.
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * @param {Event.Facade} event An Event Facade object with the following specific properties added:
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * <dt>changedEvent</dt><dd>The event that caused the nodeChange</dd>
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * <dt>changedNode</dt><dd>The node that was interacted with</dd>
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * <dt>changedType</dt><dd>The type of change: mousedown, mouseup, right, left, backspace, tab, enter, etc..</dd>
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * <dt>commands</dt><dd>The list of execCommands that belong to this change and the dompath that's associated with the changedNode</dd>
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * <dt>classNames</dt><dd>An array of classNames that are applied to the changedNode and all of it's parents</dd>
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * <dt>dompath</dt><dd>A sorted array of node instances that make up the DOM path from the changedNode to body.</dd>
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * <dt>backgroundColor</dt><dd>The cascaded backgroundColor of the changedNode</dd>
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * <dt>fontColor</dt><dd>The cascaded fontColor of the changedNode</dd>
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * <dt>fontFamily</dt><dd>The cascaded fontFamily of the changedNode</dd>
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass * <dt>fontSize</dt><dd>The cascaded fontSize of the changedNode</dd>
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass * @type {Event.Custom}
a2621d519886de7d60c30c5a0850f5c17fd2fb36Dav Glass * @event ready
a2621d519886de7d60c30c5a0850f5c17fd2fb36Dav Glass * @description Fired after the frame is ready.
a2621d519886de7d60c30c5a0850f5c17fd2fb36Dav Glass * @param {Event.Facade} event An Event Facade object.
a2621d519886de7d60c30c5a0850f5c17fd2fb36Dav Glass * @type {Event.Custom}