diff options
Diffstat (limited to 'lib/dijit/_editor/RichText.js.uncompressed.js')
| -rw-r--r-- | lib/dijit/_editor/RichText.js.uncompressed.js | 2874 |
1 files changed, 2874 insertions, 0 deletions
diff --git a/lib/dijit/_editor/RichText.js.uncompressed.js b/lib/dijit/_editor/RichText.js.uncompressed.js new file mode 100644 index 000000000..5fd3e0962 --- /dev/null +++ b/lib/dijit/_editor/RichText.js.uncompressed.js @@ -0,0 +1,2874 @@ +define("dijit/_editor/RichText", [ + "dojo/_base/array", // array.forEach array.indexOf array.some + "dojo/_base/config", // config + "dojo/_base/declare", // declare + "dojo/_base/Deferred", // Deferred + "dojo/dom", // dom.byId + "dojo/dom-attr", // domAttr.set or get + "dojo/dom-class", // domClass.add domClass.remove + "dojo/dom-construct", // domConstruct.create domConstruct.destroy domConstruct.place + "dojo/dom-geometry", // domGeometry.position + "dojo/dom-style", // domStyle.getComputedStyle domStyle.set + "dojo/_base/event", // event.stop + "dojo/_base/kernel", // kernel.deprecated + "dojo/keys", // keys.BACKSPACE keys.TAB + "dojo/_base/lang", // lang.clone lang.hitch lang.isArray lang.isFunction lang.isString lang.trim + "dojo/on", // on() + "dojo/query", // query + "dojo/ready", // ready + "dojo/sniff", // has("ie") has("mozilla") has("opera") has("safari") has("webkit") + "dojo/topic", // topic.publish() (publish) + "dojo/_base/unload", // unload + "dojo/_base/url", // url + "dojo/_base/window", // win.global + "../_Widget", + "../_CssStateMixin", + "./selection", + "./range", + "./html", + "../focus", + "../main" // dijit._scopeName +], function(array, config, declare, Deferred, dom, domAttr, domClass, domConstruct, domGeometry, domStyle, + event, kernel, keys, lang, on, query, ready, has, topic, unload, _Url, win, + _Widget, _CssStateMixin, selectionapi, rangeapi, htmlapi, focus, dijit){ + +// module: +// dijit/_editor/RichText +// summary: +// dijit/_editor/RichText is the core of dijit/Editor, which provides basic +// WYSIWYG editing features. + +// if you want to allow for rich text saving with back/forward actions, you must add a text area to your page with +// the id==dijit._scopeName + "._editor.RichText.value" (typically "dijit/_editor/RichText.value). For example, +// something like this will work: +// +// <textarea id="dijit._editor.RichText.value" style="display:none;position:absolute;top:-100px;left:-100px;height:3px;width:3px;overflow:hidden;"></textarea> +// + +var RichText = declare("dijit._editor.RichText", [_Widget, _CssStateMixin], { + // summary: + // dijit/_editor/RichText is the core of dijit.Editor, which provides basic + // WYSIWYG editing features. + // + // description: + // dijit/_editor/RichText is the core of dijit.Editor, which provides basic + // WYSIWYG editing features. It also encapsulates the differences + // of different js engines for various browsers. Do not use this widget + // with an HTML <TEXTAREA> tag, since the browser unescapes XML escape characters, + // like <. This can have unexpected behavior and lead to security issues + // such as scripting attacks. + // + // tags: + // private + + constructor: function(params /*===== , srcNodeRef =====*/){ + // summary: + // Create the widget. + // params: Object|null + // Initial settings for any of the widget attributes, except readonly attributes. + // srcNodeRef: DOMNode + // The widget replaces the specified DOMNode. + + // contentPreFilters: Function(String)[] + // Pre content filter function register array. + // these filters will be executed before the actual + // editing area gets the html content. + this.contentPreFilters = []; + + // contentPostFilters: Function(String)[] + // post content filter function register array. + // These will be used on the resulting html + // from contentDomPostFilters. The resulting + // content is the final html (returned by getValue()). + this.contentPostFilters = []; + + // contentDomPreFilters: Function(DomNode)[] + // Pre content dom filter function register array. + // These filters are applied after the result from + // contentPreFilters are set to the editing area. + this.contentDomPreFilters = []; + + // contentDomPostFilters: Function(DomNode)[] + // Post content dom filter function register array. + // These filters are executed on the editing area dom. + // The result from these will be passed to contentPostFilters. + this.contentDomPostFilters = []; + + // editingAreaStyleSheets: dojo._URL[] + // array to store all the stylesheets applied to the editing area + this.editingAreaStyleSheets = []; + + // Make a copy of this.events before we start writing into it, otherwise we + // will modify the prototype which leads to bad things on pages w/multiple editors + this.events = [].concat(this.events); + + this._keyHandlers = {}; + + if(params && lang.isString(params.value)){ + this.value = params.value; + } + + this.onLoadDeferred = new Deferred(); + }, + + baseClass: "dijitEditor", + + // inheritWidth: Boolean + // whether to inherit the parent's width or simply use 100% + inheritWidth: false, + + // focusOnLoad: [deprecated] Boolean + // Focus into this widget when the page is loaded + focusOnLoad: false, + + // name: String? + // Specifies the name of a (hidden) `<textarea>` node on the page that's used to save + // the editor content on page leave. Used to restore editor contents after navigating + // to a new page and then hitting the back button. + name: "", + + // styleSheets: [const] String + // semicolon (";") separated list of css files for the editing area + styleSheets: "", + + // height: String + // Set height to fix the editor at a specific height, with scrolling. + // By default, this is 300px. If you want to have the editor always + // resizes to accommodate the content, use AlwaysShowToolbar plugin + // and set height="". If this editor is used within a layout widget, + // set height="100%". + height: "300px", + + // minHeight: String + // The minimum height that the editor should have. + minHeight: "1em", + + // isClosed: [private] Boolean + isClosed: true, + + // isLoaded: [private] Boolean + isLoaded: false, + + // _SEPARATOR: [private] String + // Used to concat contents from multiple editors into a single string, + // so they can be saved into a single `<textarea>` node. See "name" attribute. + _SEPARATOR: "@@**%%__RICHTEXTBOUNDRY__%%**@@", + + // _NAME_CONTENT_SEP: [private] String + // USed to separate name from content. Just a colon isn't safe. + _NAME_CONTENT_SEP: "@@**%%:%%**@@", + + // onLoadDeferred: [readonly] dojo.Deferred + // Deferred which is fired when the editor finishes loading. + // Call myEditor.onLoadDeferred.then(callback) it to be informed + // when the rich-text area initialization is finalized. + onLoadDeferred: null, + + // isTabIndent: Boolean + // Make tab key and shift-tab indent and outdent rather than navigating. + // Caution: sing this makes web pages inaccessible to users unable to use a mouse. + isTabIndent: false, + + // disableSpellCheck: [const] Boolean + // When true, disables the browser's native spell checking, if supported. + // Works only in Firefox. + disableSpellCheck: false, + + postCreate: function(){ + if("textarea" === this.domNode.tagName.toLowerCase()){ + console.warn("RichText should not be used with the TEXTAREA tag. See dijit._editor.RichText docs."); + } + + // Push in the builtin filters now, making them the first executed, but not over-riding anything + // users passed in. See: #6062 + this.contentPreFilters = [lang.hitch(this, "_preFixUrlAttributes")].concat(this.contentPreFilters); + if(has("mozilla")){ + this.contentPreFilters = [this._normalizeFontStyle].concat(this.contentPreFilters); + this.contentPostFilters = [this._removeMozBogus].concat(this.contentPostFilters); + } + if(has("webkit")){ + // Try to clean up WebKit bogus artifacts. The inserted classes + // made by WebKit sometimes messes things up. + this.contentPreFilters = [this._removeWebkitBogus].concat(this.contentPreFilters); + this.contentPostFilters = [this._removeWebkitBogus].concat(this.contentPostFilters); + } + if(has("ie")){ + // IE generates <strong> and <em> but we want to normalize to <b> and <i> + this.contentPostFilters = [this._normalizeFontStyle].concat(this.contentPostFilters); + this.contentDomPostFilters = [lang.hitch(this, this._stripBreakerNodes)].concat(this.contentDomPostFilters); + } + this.inherited(arguments); + + topic.publish(dijit._scopeName + "._editor.RichText::init", this); + this.open(); + this.setupDefaultShortcuts(); + }, + + setupDefaultShortcuts: function(){ + // summary: + // Add some default key handlers + // description: + // Overwrite this to setup your own handlers. The default + // implementation does not use Editor commands, but directly + // executes the builtin commands within the underlying browser + // support. + // tags: + // protected + var exec = lang.hitch(this, function(cmd, arg){ + return function(){ + return !this.execCommand(cmd,arg); + }; + }); + + var ctrlKeyHandlers = { + b: exec("bold"), + i: exec("italic"), + u: exec("underline"), + a: exec("selectall"), + s: function(){ this.save(true); }, + m: function(){ this.isTabIndent = !this.isTabIndent; }, + + "1": exec("formatblock", "h1"), + "2": exec("formatblock", "h2"), + "3": exec("formatblock", "h3"), + "4": exec("formatblock", "h4"), + + "\\": exec("insertunorderedlist") + }; + + if(!has("ie")){ + ctrlKeyHandlers.Z = exec("redo"); //FIXME: undo? + } + + var key; + for(key in ctrlKeyHandlers){ + this.addKeyHandler(key, true, false, ctrlKeyHandlers[key]); + } + }, + + // events: [private] String[] + // events which should be connected to the underlying editing area + events: ["onKeyPress", "onKeyDown", "onKeyUp"], // onClick handled specially + + // captureEvents: [deprecated] String[] + // Events which should be connected to the underlying editing + // area, events in this array will be addListener with + // capture=true. + // TODO: looking at the code I don't see any distinction between events and captureEvents, + // so get rid of this for 2.0 if not sooner + captureEvents: [], + + _editorCommandsLocalized: false, + _localizeEditorCommands: function(){ + // summary: + // When IE is running in a non-English locale, the API actually changes, + // so that we have to say (for example) danraku instead of p (for paragraph). + // Handle that here. + // tags: + // private + if(RichText._editorCommandsLocalized){ + // Use the already generate cache of mappings. + this._local2NativeFormatNames = RichText._local2NativeFormatNames; + this._native2LocalFormatNames = RichText._native2LocalFormatNames; + return; + } + RichText._editorCommandsLocalized = true; + RichText._local2NativeFormatNames = {}; + RichText._native2LocalFormatNames = {}; + this._local2NativeFormatNames = RichText._local2NativeFormatNames; + this._native2LocalFormatNames = RichText._native2LocalFormatNames; + //in IE, names for blockformat is locale dependent, so we cache the values here + + //put p after div, so if IE returns Normal, we show it as paragraph + //We can distinguish p and div if IE returns Normal, however, in order to detect that, + //we have to call this.document.selection.createRange().parentElement() or such, which + //could slow things down. Leave it as it is for now + var formats = ['div', 'p', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ol', 'ul', 'address']; + var localhtml = "", format, i=0; + while((format=formats[i++])){ + //append a <br> after each element to separate the elements more reliably + if(format.charAt(1) !== 'l'){ + localhtml += "<"+format+"><span>content</span></"+format+"><br/>"; + }else{ + localhtml += "<"+format+"><li>content</li></"+format+"><br/>"; + } + } + // queryCommandValue returns empty if we hide editNode, so move it out of screen temporary + // Also, IE9 does weird stuff unless we do it inside the editor iframe. + var style = { position: "absolute", top: "0px", zIndex: 10, opacity: 0.01 }; + var div = domConstruct.create('div', {style: style, innerHTML: localhtml}); + this.ownerDocumentBody.appendChild(div); + + // IE9 has a timing issue with doing this right after setting + // the inner HTML, so put a delay in. + var inject = lang.hitch(this, function(){ + var node = div.firstChild; + while(node){ + try{ + this._sCall("selectElement", [node.firstChild]); + var nativename = node.tagName.toLowerCase(); + this._local2NativeFormatNames[nativename] = document.queryCommandValue("formatblock"); + this._native2LocalFormatNames[this._local2NativeFormatNames[nativename]] = nativename; + node = node.nextSibling.nextSibling; + //console.log("Mapped: ", nativename, " to: ", this._local2NativeFormatNames[nativename]); + }catch(e){ /*Sqelch the occasional IE9 error */ } + } + domConstruct.destroy(div); + }); + this.defer(inject); + }, + + open: function(/*DomNode?*/ element){ + // summary: + // Transforms the node referenced in this.domNode into a rich text editing + // node. + // description: + // Sets up the editing area asynchronously. This will result in + // the creation and replacement with an iframe. + // tags: + // private + + if(!this.onLoadDeferred || this.onLoadDeferred.fired >= 0){ + this.onLoadDeferred = new Deferred(); + } + + if(!this.isClosed){ this.close(); } + topic.publish(dijit._scopeName + "._editor.RichText::open", this); + + if(arguments.length === 1 && element.nodeName){ // else unchanged + this.domNode = element; + } + + var dn = this.domNode; + + // "html" will hold the innerHTML of the srcNodeRef and will be used to + // initialize the editor. + var html; + + if(lang.isString(this.value)){ + // Allow setting the editor content programmatically instead of + // relying on the initial content being contained within the target + // domNode. + html = this.value; + delete this.value; + dn.innerHTML = ""; + }else if(dn.nodeName && dn.nodeName.toLowerCase() == "textarea"){ + // if we were created from a textarea, then we need to create a + // new editing harness node. + var ta = (this.textarea = dn); + this.name = ta.name; + html = ta.value; + dn = this.domNode = this.ownerDocument.createElement("div"); + dn.setAttribute('widgetId', this.id); + ta.removeAttribute('widgetId'); + dn.cssText = ta.cssText; + dn.className += " " + ta.className; + domConstruct.place(dn, ta, "before"); + var tmpFunc = lang.hitch(this, function(){ + //some browsers refuse to submit display=none textarea, so + //move the textarea off screen instead + domStyle.set(ta, { + display: "block", + position: "absolute", + top: "-1000px" + }); + + if(has("ie")){ //nasty IE bug: abnormal formatting if overflow is not hidden + var s = ta.style; + this.__overflow = s.overflow; + s.overflow = "hidden"; + } + }); + if(has("ie")){ + this.defer(tmpFunc, 10); + }else{ + tmpFunc(); + } + + if(ta.form){ + var resetValue = ta.value; + this.reset = function(){ + var current = this.getValue(); + if(current !== resetValue){ + this.replaceValue(resetValue); + } + }; + on(ta.form, "submit", lang.hitch(this, function(){ + // Copy value to the <textarea> so it gets submitted along with form. + // FIXME: should we be calling close() here instead? + domAttr.set(ta, 'disabled', this.disabled); // don't submit the value if disabled + ta.value = this.getValue(); + })); + } + }else{ + html = htmlapi.getChildrenHtml(dn); + dn.innerHTML = ""; + } + + this.value = html; + + // If we're a list item we have to put in a blank line to force the + // bullet to nicely align at the top of text + if(dn.nodeName && dn.nodeName === "LI"){ + dn.innerHTML = " <br>"; + } + + // Construct the editor div structure. + this.header = dn.ownerDocument.createElement("div"); + dn.appendChild(this.header); + this.editingArea = dn.ownerDocument.createElement("div"); + dn.appendChild(this.editingArea); + this.footer = dn.ownerDocument.createElement("div"); + dn.appendChild(this.footer); + + if(!this.name){ + this.name = this.id + "_AUTOGEN"; + } + + // User has pressed back/forward button so we lost the text in the editor, but it's saved + // in a hidden <textarea> (which contains the data for all the editors on this page), + // so get editor value from there + if(this.name !== "" && (!config["useXDomain"] || config["allowXdRichTextSave"])){ + var saveTextarea = dom.byId(dijit._scopeName + "._editor.RichText.value"); + if(saveTextarea && saveTextarea.value !== ""){ + var datas = saveTextarea.value.split(this._SEPARATOR), i=0, dat; + while((dat=datas[i++])){ + var data = dat.split(this._NAME_CONTENT_SEP); + if(data[0] === this.name){ + html = data[1]; + datas = datas.splice(i, 1); + saveTextarea.value = datas.join(this._SEPARATOR); + break; + } + } + } + + if(!RichText._globalSaveHandler){ + RichText._globalSaveHandler = {}; + unload.addOnUnload(function(){ + var id; + for(id in RichText._globalSaveHandler){ + var f = RichText._globalSaveHandler[id]; + if(lang.isFunction(f)){ + f(); + } + } + }); + } + RichText._globalSaveHandler[this.id] = lang.hitch(this, "_saveContent"); + } + + this.isClosed = false; + + var ifr = (this.editorObject = this.iframe = this.ownerDocument.createElement('iframe')); + ifr.id = this.id+"_iframe"; + ifr.style.border = "none"; + ifr.style.width = "100%"; + if(this._layoutMode){ + // iframe should be 100% height, thus getting it's height from surrounding + // <div> (which has the correct height set by Editor) + ifr.style.height = "100%"; + }else{ + if(has("ie") >= 7){ + if(this.height){ + ifr.style.height = this.height; + } + if(this.minHeight){ + ifr.style.minHeight = this.minHeight; + } + }else{ + ifr.style.height = this.height ? this.height : this.minHeight; + } + } + ifr.frameBorder = 0; + ifr._loadFunc = lang.hitch( this, function(w){ + this.window = w; + this.document = this.window.document; + + if(has("ie")){ + this._localizeEditorCommands(); + } + + // Do final setup and set initial contents of editor + this.onLoad(html); + }); + + // Set the iframe's initial (blank) content. + var src = this._getIframeDocTxt(), + s = "javascript: '" + src.replace(/\\/g, "\\\\").replace(/'/g, "\\'") + "'"; + ifr.setAttribute('src', s); + this.editingArea.appendChild(ifr); + + if(has("safari") <= 4){ + src = ifr.getAttribute("src"); + if(!src || src.indexOf("javascript") === -1){ + // Safari 4 and earlier sometimes act oddly + // So we have to set it again. + this.defer(function(){ ifr.setAttribute('src', s); }); + } + } + + // TODO: this is a guess at the default line-height, kinda works + if(dn.nodeName === "LI"){ + dn.lastChild.style.marginTop = "-1.2em"; + } + + domClass.add(this.domNode, this.baseClass); + }, + + //static cache variables shared among all instance of this class + _local2NativeFormatNames: {}, + _native2LocalFormatNames: {}, + + _getIframeDocTxt: function(){ + // summary: + // Generates the boilerplate text of the document inside the iframe (ie, `<html><head>...</head><body/></html>`). + // Editor content (if not blank) should be added afterwards. + // tags: + // private + var _cs = domStyle.getComputedStyle(this.domNode); + + // The contents inside of <body>. The real contents are set later via a call to setValue(). + var html = ""; + var setBodyId = true; + if(has("ie") || has("webkit") || (!this.height && !has("mozilla"))){ + // In auto-expand mode, need a wrapper div for AlwaysShowToolbar plugin to correctly + // expand/contract the editor as the content changes. + html = "<div id='dijitEditorBody'></div>"; + setBodyId = false; + }else if(has("mozilla")){ + // workaround bug where can't select then delete text (until user types something + // into the editor)... and/or issue where typing doesn't erase selected text + this._cursorToStart = true; + html = " "; // + } + + var font = [ _cs.fontWeight, _cs.fontSize, _cs.fontFamily ].join(" "); + + // line height is tricky - applying a units value will mess things up. + // if we can't get a non-units value, bail out. + var lineHeight = _cs.lineHeight; + if(lineHeight.indexOf("px") >= 0){ + lineHeight = parseFloat(lineHeight)/parseFloat(_cs.fontSize); + // console.debug(lineHeight); + }else if(lineHeight.indexOf("em")>=0){ + lineHeight = parseFloat(lineHeight); + }else{ + // If we can't get a non-units value, just default + // it to the CSS spec default of 'normal'. Seems to + // work better, esp on IE, than '1.0' + lineHeight = "normal"; + } + var userStyle = ""; + var self = this; + this.style.replace(/(^|;)\s*(line-|font-?)[^;]+/ig, function(match){ + match = match.replace(/^;/ig,"") + ';'; + var s = match.split(":")[0]; + if(s){ + s = lang.trim(s); + s = s.toLowerCase(); + var i; + var sC = ""; + for(i = 0; i < s.length; i++){ + var c = s.charAt(i); + switch(c){ + case "-": + i++; + c = s.charAt(i).toUpperCase(); + default: + sC += c; + } + } + domStyle.set(self.domNode, sC, ""); + } + userStyle += match + ';'; + }); + + + // need to find any associated label element and update iframe document title + var label=query('label[for="'+this.id+'"]'); + + return [ + this.isLeftToRight() ? "<html>\n<head>\n" : "<html dir='rtl'>\n<head>\n", + (has("mozilla") && label.length ? "<title>" + label[0].innerHTML + "</title>\n" : ""), + "<meta http-equiv='Content-Type' content='text/html'>\n", + "<style>\n", + "\tbody,html {\n", + "\t\tbackground:transparent;\n", + "\t\tpadding: 1px 0 0 0;\n", + "\t\tmargin: -1px 0 0 0;\n", // remove extraneous vertical scrollbar on safari and firefox + + // Set the html/body sizing. Webkit always needs this, other browsers + // only set it when height is defined (not auto-expanding), otherwise + // scrollers do not appear. + ((has("webkit"))?"\t\twidth: 100%;\n":""), + ((has("webkit"))?"\t\theight: 100%;\n":""), + "\t}\n", + + // TODO: left positioning will cause contents to disappear out of view + // if it gets too wide for the visible area + "\tbody{\n", + "\t\ttop:0px;\n", + "\t\tleft:0px;\n", + "\t\tright:0px;\n", + "\t\tfont:", font, ";\n", + ((this.height||has("opera")) ? "" : "\t\tposition: fixed;\n"), + // FIXME: IE 6 won't understand min-height? + "\t\tmin-height:", this.minHeight, ";\n", + "\t\tline-height:", lineHeight,";\n", + "\t}\n", + "\tp{ margin: 1em 0; }\n", + + // Determine how scrollers should be applied. In autoexpand mode (height = "") no scrollers on y at all. + // But in fixed height mode we want both x/y scrollers. Also, if it's using wrapping div and in auto-expand + // (Mainly IE) we need to kill the y scroller on body and html. + (!setBodyId && !this.height ? "\tbody,html {overflow-y: hidden;}\n" : ""), + "\t#dijitEditorBody{overflow-x: auto; overflow-y:" + (this.height ? "auto;" : "hidden;") + " outline: 0px;}\n", + "\tli > ul:-moz-first-node, li > ol:-moz-first-node{ padding-top: 1.2em; }\n", + // Can't set min-height in IE9, it puts layout on li, which puts move/resize handles. + (!has("ie") ? "\tli{ min-height:1.2em; }\n" : ""), + "</style>\n", + this._applyEditingAreaStyleSheets(),"\n", + "</head>\n<body ", + (setBodyId?"id='dijitEditorBody' ":""), + + // Onload handler fills in real editor content. + // On IE9, sometimes onload is called twice, and the first time frameElement is null (test_FullScreen.html) + "onload='frameElement && frameElement._loadFunc(window,document)' ", + "style='"+userStyle+"'>", html, "</body>\n</html>" + ].join(""); // String + }, + + _applyEditingAreaStyleSheets: function(){ + // summary: + // apply the specified css files in styleSheets + // tags: + // private + var files = []; + if(this.styleSheets){ + files = this.styleSheets.split(';'); + this.styleSheets = ''; + } + + //empty this.editingAreaStyleSheets here, as it will be filled in addStyleSheet + files = files.concat(this.editingAreaStyleSheets); + this.editingAreaStyleSheets = []; + + var text='', i=0, url; + while((url=files[i++])){ + var abstring = (new _Url(win.global.location, url)).toString(); + this.editingAreaStyleSheets.push(abstring); + text += '<link rel="stylesheet" type="text/css" href="'+abstring+'"/>'; + } + return text; + }, + + addStyleSheet: function(/*dojo/_base/url*/ uri){ + // summary: + // add an external stylesheet for the editing area + // uri: + // Url of the external css file + var url=uri.toString(); + + //if uri is relative, then convert it to absolute so that it can be resolved correctly in iframe + if(url.charAt(0) === '.' || (url.charAt(0) !== '/' && !uri.host)){ + url = (new _Url(win.global.location, url)).toString(); + } + + if(array.indexOf(this.editingAreaStyleSheets, url) > -1){ +// console.debug("dijit/_editor/RichText.addStyleSheet(): Style sheet "+url+" is already applied"); + return; + } + + this.editingAreaStyleSheets.push(url); + this.onLoadDeferred.then(lang.hitch(this, function(){ + if(this.document.createStyleSheet){ //IE + this.document.createStyleSheet(url); + }else{ //other browser + var head = this.document.getElementsByTagName("head")[0]; + var stylesheet = this.document.createElement("link"); + stylesheet.rel="stylesheet"; + stylesheet.type="text/css"; + stylesheet.href=url; + head.appendChild(stylesheet); + } + })); + }, + + removeStyleSheet: function(/*dojo/_base/url*/ uri){ + // summary: + // remove an external stylesheet for the editing area + var url=uri.toString(); + //if uri is relative, then convert it to absolute so that it can be resolved correctly in iframe + if(url.charAt(0) === '.' || (url.charAt(0) !== '/' && !uri.host)){ + url = (new _Url(win.global.location, url)).toString(); + } + var index = array.indexOf(this.editingAreaStyleSheets, url); + if(index === -1){ +// console.debug("dijit/_editor/RichText.removeStyleSheet(): Style sheet "+url+" has not been applied"); + return; + } + delete this.editingAreaStyleSheets[index]; + query('link:[href="'+url+'"]', this.window.document).orphan(); + }, + + // disabled: Boolean + // The editor is disabled; the text cannot be changed. + disabled: false, + + _mozSettingProps: {'styleWithCSS':false}, + _setDisabledAttr: function(/*Boolean*/ value){ + value = !!value; + this._set("disabled", value); + if(!this.isLoaded){ return; } // this method requires init to be complete + if(has("ie") || has("webkit") || has("opera")){ + var preventIEfocus = has("ie") && (this.isLoaded || !this.focusOnLoad); + if(preventIEfocus){ this.editNode.unselectable = "on"; } + this.editNode.contentEditable = !value; + if(preventIEfocus){ + this.defer(function(){ + if(this.editNode){ // guard in case widget destroyed before timeout + this.editNode.unselectable = "off"; + } + }); + } + }else{ //moz + try{ + this.document.designMode=(value?'off':'on'); + }catch(e){ return; } // ! _disabledOK + if(!value && this._mozSettingProps){ + var ps = this._mozSettingProps; + var n; + for(n in ps){ + if(ps.hasOwnProperty(n)){ + try{ + this.document.execCommand(n,false,ps[n]); + }catch(e2){} + } + } + } +// this.document.execCommand('contentReadOnly', false, value); +// if(value){ +// this.blur(); //to remove the blinking caret +// } + } + this._disabledOK = true; + }, + +/* Event handlers + *****************/ + + onLoad: function(/*String*/ html){ + // summary: + // Handler after the iframe finishes loading. + // html: String + // Editor contents should be set to this value + // tags: + // protected + + // TODO: rename this to _onLoad, make empty public onLoad() method, deprecate/make protected onLoadDeferred handler? + + if(!this.window.__registeredWindow){ + this.window.__registeredWindow = true; + this._iframeRegHandle = focus.registerIframe(this.iframe); + } + if(!has("ie") && !has("webkit") && (this.height || has("mozilla"))){ + this.editNode=this.document.body; + }else{ + // there's a wrapper div around the content, see _getIframeDocTxt(). + this.editNode=this.document.body.firstChild; + var _this = this; + if(has("ie")){ // #4996 IE wants to focus the BODY tag + this.tabStop = domConstruct.create('div', { tabIndex: -1 }, this.editingArea); + this.iframe.onfocus = function(){ _this.editNode.setActive(); }; + } + } + this.focusNode = this.editNode; // for InlineEditBox + + + var events = this.events.concat(this.captureEvents); + var ap = this.iframe ? this.document : this.editNode; + array.forEach(events, function(item){ + this.connect(ap, item.toLowerCase(), item); + }, this); + + this.connect(ap, "onmouseup", "onClick"); // mouseup in the margin does not generate an onclick event + + if(has("ie")){ // IE contentEditable + this.connect(this.document, "onmousedown", "_onIEMouseDown"); // #4996 fix focus + + // give the node Layout on IE + // TODO: this may no longer be needed, since we've reverted IE to using an iframe, + // not contentEditable. Removing it would also probably remove the need for creating + // the extra <div> in _getIframeDocTxt() + this.editNode.style.zoom = 1.0; + }else{ + this.connect(this.document, "onmousedown", function(){ + // Clear the moveToStart focus, as mouse + // down will set cursor point. Required to properly + // work with selection/position driven plugins and clicks in + // the window. refs: #10678 + delete this._cursorToStart; + }); + } + + if(has("webkit")){ + //WebKit sometimes doesn't fire right on selections, so the toolbar + //doesn't update right. Therefore, help it out a bit with an additional + //listener. A mouse up will typically indicate a display change, so fire this + //and get the toolbar to adapt. Reference: #9532 + this._webkitListener = this.connect(this.document, "onmouseup", "onDisplayChanged"); + this.connect(this.document, "onmousedown", function(e){ + var t = e.target; + if(t && (t === this.document.body || t === this.document)){ + // Since WebKit uses the inner DIV, we need to check and set position. + // See: #12024 as to why the change was made. + this.defer("placeCursorAtEnd"); + } + }); + } + + if(has("ie")){ + // Try to make sure 'hidden' elements aren't visible in edit mode (like browsers other than IE + // do). See #9103 + try{ + this.document.execCommand('RespectVisibilityInDesign', true, null); + }catch(e){/* squelch */} + } + + this.isLoaded = true; + + this.set('disabled', this.disabled); // initialize content to editable (or not) + + // Note that setValue() call will only work after isLoaded is set to true (above) + + // Set up a function to allow delaying the setValue until a callback is fired + // This ensures extensions like dijit.Editor have a way to hold the value set + // until plugins load (and do things like register filters). + var setContent = lang.hitch(this, function(){ + this.setValue(html); + if(this.onLoadDeferred){ + this.onLoadDeferred.resolve(true); + } + this.onDisplayChanged(); + if(this.focusOnLoad){ + // after the document loads, then set focus after updateInterval expires so that + // onNormalizedDisplayChanged has run to avoid input caret issues + ready(lang.hitch(this, "defer", "focus", this.updateInterval)); + } + // Save off the initial content now + this.value = this.getValue(true); + }); + if(this.setValueDeferred){ + this.setValueDeferred.then(setContent); + }else{ + setContent(); + } + }, + + onKeyDown: function(/* Event */ e){ + // summary: + // Handler for onkeydown event + // tags: + // protected + + // we need this event at the moment to get the events from control keys + // such as the backspace. It might be possible to add this to Dojo, so that + // keyPress events can be emulated by the keyDown and keyUp detection. + + if(e.keyCode === keys.TAB && this.isTabIndent ){ + event.stop(e); //prevent tab from moving focus out of editor + + // FIXME: this is a poor-man's indent/outdent. It would be + // better if it added 4 " " chars in an undoable way. + // Unfortunately pasteHTML does not prove to be undoable + if(this.queryCommandEnabled((e.shiftKey ? "outdent" : "indent"))){ + this.execCommand((e.shiftKey ? "outdent" : "indent")); + } + } + if(has("ie")){ + if(e.keyCode == keys.TAB && !this.isTabIndent){ + if(e.shiftKey && !e.ctrlKey && !e.altKey){ + // focus the BODY so the browser will tab away from it instead + this.iframe.focus(); + }else if(!e.shiftKey && !e.ctrlKey && !e.altKey){ + // focus the BODY so the browser will tab away from it instead + this.tabStop.focus(); + } + }else if(e.keyCode === keys.BACKSPACE && this.document.selection.type === "Control"){ + // IE has a bug where if a non-text object is selected in the editor, + // hitting backspace would act as if the browser's back button was + // clicked instead of deleting the object. see #1069 + event.stop(e); + this.execCommand("delete"); + }else if((65 <= e.keyCode && e.keyCode <= 90) || + (e.keyCode>=37 && e.keyCode<=40) // FIXME: get this from connect() instead! + ){ //arrow keys + e.charCode = e.keyCode; + this.onKeyPress(e); + } + } + if(has("ff")){ + if(e.keyCode === keys.PAGE_UP || e.keyCode === keys.PAGE_DOWN ){ + if(this.editNode.clientHeight >= this.editNode.scrollHeight){ + // Stop the event to prevent firefox from trapping the cursor when there is no scroll bar. + e.preventDefault(); + } + } + } + return true; + }, + + onKeyUp: function(/*===== e =====*/){ + // summary: + // Handler for onkeyup event + // tags: + // callback + }, + + setDisabled: function(/*Boolean*/ disabled){ + // summary: + // Deprecated, use set('disabled', ...) instead. + // tags: + // deprecated + kernel.deprecated('dijit.Editor::setDisabled is deprecated','use dijit.Editor::attr("disabled",boolean) instead', 2.0); + this.set('disabled',disabled); + }, + _setValueAttr: function(/*String*/ value){ + // summary: + // Registers that attr("value", foo) should call setValue(foo) + this.setValue(value); + }, + _setDisableSpellCheckAttr: function(/*Boolean*/ disabled){ + if(this.document){ + domAttr.set(this.document.body, "spellcheck", !disabled); + }else{ + // try again after the editor is finished loading + this.onLoadDeferred.then(lang.hitch(this, function(){ + domAttr.set(this.document.body, "spellcheck", !disabled); + })); + } + this._set("disableSpellCheck", disabled); + }, + + onKeyPress: function(e){ + // summary: + // Handle the various key events + // tags: + // protected + + var c = (e.keyChar && e.keyChar.toLowerCase()) || e.keyCode, + handlers = this._keyHandlers[c], + args = arguments; + + if(handlers && !e.altKey){ + array.some(handlers, function(h){ + // treat meta- same as ctrl-, for benefit of mac users + if(!(h.shift ^ e.shiftKey) && !(h.ctrl ^ (e.ctrlKey||e.metaKey))){ + if(!h.handler.apply(this, args)){ + e.preventDefault(); + } + return true; + } + }, this); + } + + // function call after the character has been inserted + if(!this._onKeyHitch){ + this._onKeyHitch = lang.hitch(this, "onKeyPressed"); + } + this.defer("_onKeyHitch", 1); + return true; + }, + + addKeyHandler: function(/*String*/ key, /*Boolean*/ ctrl, /*Boolean*/ shift, /*Function*/ handler){ + // summary: + // Add a handler for a keyboard shortcut + // description: + // The key argument should be in lowercase if it is a letter character + // tags: + // protected + if(!lang.isArray(this._keyHandlers[key])){ + this._keyHandlers[key] = []; + } + //TODO: would be nice to make this a hash instead of an array for quick lookups + this._keyHandlers[key].push({ + shift: shift || false, + ctrl: ctrl || false, + handler: handler + }); + }, + + onKeyPressed: function(){ + // summary: + // Handler for after the user has pressed a key, and the display has been updated. + // (Runs on a timer so that it runs after the display is updated) + // tags: + // private + this.onDisplayChanged(/*e*/); // can't pass in e + }, + + onClick: function(/*Event*/ e){ + // summary: + // Handler for when the user clicks. + // tags: + // private + + // console.info('onClick',this._tryDesignModeOn); + this.onDisplayChanged(e); + }, + + _onIEMouseDown: function(){ + // summary: + // IE only to prevent 2 clicks to focus + // tags: + // protected + + if(!this.focused && !this.disabled){ + this.focus(); + } + }, + + _onBlur: function(e){ + // summary: + // Called from focus manager when focus has moved away from this editor + // tags: + // protected + + // console.info('_onBlur') + + this.inherited(arguments); + + var newValue = this.getValue(true); + if(newValue !== this.value){ + this.onChange(newValue); + } + this._set("value", newValue); + }, + + _onFocus: function(/*Event*/ e){ + // summary: + // Called from focus manager when focus has moved into this editor + // tags: + // protected + + // console.info('_onFocus') + if(!this.disabled){ + if(!this._disabledOK){ + this.set('disabled', false); + } + this.inherited(arguments); + } + }, + + // TODO: remove in 2.0 + blur: function(){ + // summary: + // Remove focus from this instance. + // tags: + // deprecated + if(!has("ie") && this.window.document.documentElement && this.window.document.documentElement.focus){ + this.window.document.documentElement.focus(); + }else if(this.ownerDocumentBody.focus){ + this.ownerDocumentBody.focus(); + } + }, + + focus: function(){ + // summary: + // Move focus to this editor + if(!this.isLoaded){ + this.focusOnLoad = true; + return; + } + if(this._cursorToStart){ + delete this._cursorToStart; + if(this.editNode.childNodes){ + this.placeCursorAtStart(); // this calls focus() so return + return; + } + } + if(!has("ie")){ + focus.focus(this.iframe); + }else if(this.editNode && this.editNode.focus){ + // editNode may be hidden in display:none div, lets just punt in this case + //this.editNode.focus(); -> causes IE to scroll always (strict and quirks mode) to the top the Iframe + // if we fire the event manually and let the browser handle the focusing, the latest + // cursor position is focused like in FF + this.iframe.fireEvent('onfocus', document.createEventObject()); // createEventObject only in IE + // }else{ + // TODO: should we throw here? + // console.debug("Have no idea how to focus into the editor!"); + } + }, + + // _lastUpdate: 0, + updateInterval: 200, + _updateTimer: null, + onDisplayChanged: function(/*Event*/ /*===== e =====*/){ + // summary: + // This event will be fired every time the display context + // changes and the result needs to be reflected in the UI. + // description: + // If you don't want to have update too often, + // onNormalizedDisplayChanged should be used instead + // tags: + // private + + // var _t=new Date(); + if(this._updateTimer){ + this._updateTimer.remove(); + } + this._updateTimer = this.defer("onNormalizedDisplayChanged", this.updateInterval); + + // Technically this should trigger a call to watch("value", ...) registered handlers, + // but getValue() is too slow to call on every keystroke so we don't. + }, + onNormalizedDisplayChanged: function(){ + // summary: + // This event is fired every updateInterval ms or more + // description: + // If something needs to happen immediately after a + // user change, please use onDisplayChanged instead. + // tags: + // private + delete this._updateTimer; + }, + onChange: function(/*===== newContent =====*/){ + // summary: + // This is fired if and only if the editor loses focus and + // the content is changed. + }, + _normalizeCommand: function(/*String*/ cmd, /*Anything?*/argument){ + // summary: + // Used as the advice function to map our + // normalized set of commands to those supported by the target + // browser. + // tags: + // private + + var command = cmd.toLowerCase(); + if(command === "formatblock"){ + if(has("safari") && argument === undefined){ command = "heading"; } + }else if(command === "hilitecolor" && !has("mozilla")){ + command = "backcolor"; + } + + return command; + }, + + _qcaCache: {}, + queryCommandAvailable: function(/*String*/ command){ + // summary: + // Tests whether a command is supported by the host. Clients + // SHOULD check whether a command is supported before attempting + // to use it, behaviour for unsupported commands is undefined. + // command: + // The command to test for + // tags: + // private + + // memoizing version. See _queryCommandAvailable for computing version + var ca = this._qcaCache[command]; + if(ca !== undefined){ return ca; } + return (this._qcaCache[command] = this._queryCommandAvailable(command)); + }, + + _queryCommandAvailable: function(/*String*/ command){ + // summary: + // See queryCommandAvailable(). + // tags: + // private + + var ie = 1; + var mozilla = 1 << 1; + var webkit = 1 << 2; + var opera = 1 << 3; + + function isSupportedBy(browsers){ + return { + ie: Boolean(browsers & ie), + mozilla: Boolean(browsers & mozilla), + webkit: Boolean(browsers & webkit), + opera: Boolean(browsers & opera) + }; + } + + var supportedBy = null; + + switch(command.toLowerCase()){ + case "bold": case "italic": case "underline": + case "subscript": case "superscript": + case "fontname": case "fontsize": + case "forecolor": case "hilitecolor": + case "justifycenter": case "justifyfull": case "justifyleft": + case "justifyright": case "delete": case "selectall": case "toggledir": + supportedBy = isSupportedBy(mozilla | ie | webkit | opera); + break; + + case "createlink": case "unlink": case "removeformat": + case "inserthorizontalrule": case "insertimage": + case "insertorderedlist": case "insertunorderedlist": + case "indent": case "outdent": case "formatblock": + case "inserthtml": case "undo": case "redo": case "strikethrough": case "tabindent": + supportedBy = isSupportedBy(mozilla | ie | opera | webkit); + break; + + case "blockdirltr": case "blockdirrtl": + case "dirltr": case "dirrtl": + case "inlinedirltr": case "inlinedirrtl": + supportedBy = isSupportedBy(ie); + break; + case "cut": case "copy": case "paste": + supportedBy = isSupportedBy( ie | mozilla | webkit | opera); + break; + + case "inserttable": + supportedBy = isSupportedBy(mozilla | ie); + break; + + case "insertcell": case "insertcol": case "insertrow": + case "deletecells": case "deletecols": case "deleterows": + case "mergecells": case "splitcell": + supportedBy = isSupportedBy(ie | mozilla); + break; + + default: return false; + } + + return (has("ie") && supportedBy.ie) || + (has("mozilla") && supportedBy.mozilla) || + (has("webkit") && supportedBy.webkit) || + (has("opera") && supportedBy.opera); // Boolean return true if the command is supported, false otherwise + }, + + execCommand: function(/*String*/ command, argument){ + // summary: + // Executes a command in the Rich Text area + // command: + // The command to execute + // argument: + // An optional argument to the command + // tags: + // protected + var returnValue; + + //focus() is required for IE to work + //In addition, focus() makes sure after the execution of + //the command, the editor receives the focus as expected + this.focus(); + + command = this._normalizeCommand(command, argument); + + if(argument !== undefined){ + if(command === "heading"){ + throw new Error("unimplemented"); + }else if((command === "formatblock") && has("ie")){ + argument = '<'+argument+'>'; + } + } + + //Check to see if we have any over-rides for commands, they will be functions on this + //widget of the form _commandImpl. If we don't, fall through to the basic native + //exec command of the browser. + var implFunc = "_" + command + "Impl"; + if(this[implFunc]){ + returnValue = this[implFunc](argument); + }else{ + argument = arguments.length > 1 ? argument : null; + if(argument || command !== "createlink"){ + returnValue = this.document.execCommand(command, false, argument); + } + } + + this.onDisplayChanged(); + return returnValue; + }, + + queryCommandEnabled: function(/*String*/ command){ + // summary: + // Check whether a command is enabled or not. + // command: + // The command to execute + // tags: + // protected + if(this.disabled || !this._disabledOK){ return false; } + + command = this._normalizeCommand(command); + + //Check to see if we have any over-rides for commands, they will be functions on this + //widget of the form _commandEnabledImpl. If we don't, fall through to the basic native + //command of the browser. + var implFunc = "_" + command + "EnabledImpl"; + + if(this[implFunc]){ + return this[implFunc](command); + }else{ + return this._browserQueryCommandEnabled(command); + } + }, + + queryCommandState: function(command){ + // summary: + // Check the state of a given command and returns true or false. + // tags: + // protected + + if(this.disabled || !this._disabledOK){ return false; } + command = this._normalizeCommand(command); + try{ + return this.document.queryCommandState(command); + }catch(e){ + //Squelch, occurs if editor is hidden on FF 3 (and maybe others.) + return false; + } + }, + + queryCommandValue: function(command){ + // summary: + // Check the value of a given command. This matters most for + // custom selections and complex values like font value setting. + // tags: + // protected + + if(this.disabled || !this._disabledOK){ return false; } + var r; + command = this._normalizeCommand(command); + if(has("ie") && command === "formatblock"){ + r = this._native2LocalFormatNames[this.document.queryCommandValue(command)]; + }else if(has("mozilla") && command === "hilitecolor"){ + var oldValue; + try{ + oldValue = this.document.queryCommandValue("styleWithCSS"); + }catch(e){ + oldValue = false; + } + this.document.execCommand("styleWithCSS", false, true); + r = this.document.queryCommandValue(command); + this.document.execCommand("styleWithCSS", false, oldValue); + }else{ + r = this.document.queryCommandValue(command); + } + return r; + }, + + // Misc. + + _sCall: function(name, args){ + // summary: + // Run the named method of dijit/_editor/selection over the + // current editor instance's window, with the passed args. + // tags: + // private + return win.withGlobal(this.window, name, selectionapi, args); + }, + + // FIXME: this is a TON of code duplication. Why? + + placeCursorAtStart: function(){ + // summary: + // Place the cursor at the start of the editing area. + // tags: + // private + + this.focus(); + + //see comments in placeCursorAtEnd + var isvalid=false; + if(has("mozilla")){ + // TODO: Is this branch even necessary? + var first=this.editNode.firstChild; + while(first){ + if(first.nodeType === 3){ + if(first.nodeValue.replace(/^\s+|\s+$/g, "").length>0){ + isvalid=true; + this._sCall("selectElement", [ first ]); + break; + } + }else if(first.nodeType === 1){ + isvalid=true; + var tg = first.tagName ? first.tagName.toLowerCase() : ""; + // Collapse before childless tags. + if(/br|input|img|base|meta|area|basefont|hr|link/.test(tg)){ + this._sCall("selectElement", [ first ]); + }else{ + // Collapse inside tags with children. + this._sCall("selectElementChildren", [ first ]); + } + break; + } + first = first.nextSibling; + } + }else{ + isvalid=true; + this._sCall("selectElementChildren", [ this.editNode ]); + } + if(isvalid){ + this._sCall("collapse", [ true ]); + } + }, + + placeCursorAtEnd: function(){ + // summary: + // Place the cursor at the end of the editing area. + // tags: + // private + + this.focus(); + + //In mozilla, if last child is not a text node, we have to use + // selectElementChildren on this.editNode.lastChild otherwise the + // cursor would be placed at the end of the closing tag of + //this.editNode.lastChild + var isvalid=false; + if(has("mozilla")){ + var last=this.editNode.lastChild; + while(last){ + if(last.nodeType === 3){ + if(last.nodeValue.replace(/^\s+|\s+$/g, "").length>0){ + isvalid=true; + this._sCall("selectElement", [ last ]); + break; + } + }else if(last.nodeType === 1){ + isvalid=true; + this._sCall("selectElement", [ last.lastChild || last]); + break; + } + last = last.previousSibling; + } + }else{ + isvalid=true; + this._sCall("selectElementChildren", [ this.editNode ]); + } + if(isvalid){ + this._sCall("collapse", [ false ]); + } + }, + + getValue: function(/*Boolean?*/ nonDestructive){ + // summary: + // Return the current content of the editing area (post filters + // are applied). Users should call get('value') instead. + // nonDestructive: + // defaults to false. Should the post-filtering be run over a copy + // of the live DOM? Most users should pass "true" here unless they + // *really* know that none of the installed filters are going to + // mess up the editing session. + // tags: + // private + if(this.textarea){ + if(this.isClosed || !this.isLoaded){ + return this.textarea.value; + } + } + + return this._postFilterContent(null, nonDestructive); + }, + _getValueAttr: function(){ + // summary: + // Hook to make attr("value") work + return this.getValue(true); + }, + + setValue: function(/*String*/ html){ + // summary: + // This function sets the content. No undo history is preserved. + // Users should use set('value', ...) instead. + // tags: + // deprecated + + // TODO: remove this and getValue() for 2.0, and move code to _setValueAttr() + + if(!this.isLoaded){ + // try again after the editor is finished loading + this.onLoadDeferred.then(lang.hitch(this, function(){ + this.setValue(html); + })); + return; + } + this._cursorToStart = true; + if(this.textarea && (this.isClosed || !this.isLoaded)){ + this.textarea.value=html; + }else{ + html = this._preFilterContent(html); + var node = this.isClosed ? this.domNode : this.editNode; + if(html && has("mozilla") && html.toLowerCase() === "<p></p>"){ + html = "<p> </p>"; // + } + + // Use to avoid webkit problems where editor is disabled until the user clicks it + if(!html && has("webkit")){ + html = " "; // + } + node.innerHTML = html; + this._preDomFilterContent(node); + } + + this.onDisplayChanged(); + this._set("value", this.getValue(true)); + }, + + replaceValue: function(/*String*/ html){ + // summary: + // This function set the content while trying to maintain the undo stack + // (now only works fine with Moz, this is identical to setValue in all + // other browsers) + // tags: + // protected + + if(this.isClosed){ + this.setValue(html); + }else if(this.window && this.window.getSelection && !has("mozilla")){ // Safari + // look ma! it's a totally f'd browser! + this.setValue(html); + }else if(this.window && this.window.getSelection){ // Moz + html = this._preFilterContent(html); + this.execCommand("selectall"); + if(!html){ + this._cursorToStart = true; + html = " "; // + } + this.execCommand("inserthtml", html); + this._preDomFilterContent(this.editNode); + }else if(this.document && this.document.selection){//IE + //In IE, when the first element is not a text node, say + //an <a> tag, when replacing the content of the editing + //area, the <a> tag will be around all the content + //so for now, use setValue for IE too + this.setValue(html); + } + + this._set("value", this.getValue(true)); + }, + + _preFilterContent: function(/*String*/ html){ + // summary: + // Filter the input before setting the content of the editing + // area. DOM pre-filtering may happen after this + // string-based filtering takes place but as of 1.2, this is not + // guaranteed for operations such as the inserthtml command. + // tags: + // private + + var ec = html; + array.forEach(this.contentPreFilters, function(ef){ if(ef){ ec = ef(ec); } }); + return ec; + }, + _preDomFilterContent: function(/*DomNode*/ dom){ + // summary: + // filter the input's live DOM. All filter operations should be + // considered to be "live" and operating on the DOM that the user + // will be interacting with in their editing session. + // tags: + // private + dom = dom || this.editNode; + array.forEach(this.contentDomPreFilters, function(ef){ + if(ef && lang.isFunction(ef)){ + ef(dom); + } + }, this); + }, + + _postFilterContent: function( + /*DomNode|DomNode[]|String?*/ dom, + /*Boolean?*/ nonDestructive){ + // summary: + // filter the output after getting the content of the editing area + // + // description: + // post-filtering allows plug-ins and users to specify any number + // of transforms over the editor's content, enabling many common + // use-cases such as transforming absolute to relative URLs (and + // vice-versa), ensuring conformance with a particular DTD, etc. + // The filters are registered in the contentDomPostFilters and + // contentPostFilters arrays. Each item in the + // contentDomPostFilters array is a function which takes a DOM + // Node or array of nodes as its only argument and returns the + // same. It is then passed down the chain for further filtering. + // The contentPostFilters array behaves the same way, except each + // member operates on strings. Together, the DOM and string-based + // filtering allow the full range of post-processing that should + // be necessaray to enable even the most agressive of post-editing + // conversions to take place. + // + // If nonDestructive is set to "true", the nodes are cloned before + // filtering proceeds to avoid potentially destructive transforms + // to the content which may still needed to be edited further. + // Once DOM filtering has taken place, the serialized version of + // the DOM which is passed is run through each of the + // contentPostFilters functions. + // + // dom: + // a node, set of nodes, which to filter using each of the current + // members of the contentDomPostFilters and contentPostFilters arrays. + // + // nonDestructive: + // defaults to "false". If true, ensures that filtering happens on + // a clone of the passed-in content and not the actual node + // itself. + // + // tags: + // private + + var ec; + if(!lang.isString(dom)){ + dom = dom || this.editNode; + if(this.contentDomPostFilters.length){ + if(nonDestructive){ + dom = lang.clone(dom); + } + array.forEach(this.contentDomPostFilters, function(ef){ + dom = ef(dom); + }); + } + ec = htmlapi.getChildrenHtml(dom); + }else{ + ec = dom; + } + + if(!lang.trim(ec.replace(/^\xA0\xA0*/, '').replace(/\xA0\xA0*$/, '')).length){ + ec = ""; + } + + // if(has("ie")){ + // //removing appended <P> </P> for IE + // ec = ec.replace(/(?:<p> </p>[\n\r]*)+$/i,""); + // } + array.forEach(this.contentPostFilters, function(ef){ + ec = ef(ec); + }); + + return ec; + }, + + _saveContent: function(){ + // summary: + // Saves the content in an onunload event if the editor has not been closed + // tags: + // private + + var saveTextarea = dom.byId(dijit._scopeName + "._editor.RichText.value"); + if(saveTextarea){ + if(saveTextarea.value){ + saveTextarea.value += this._SEPARATOR; + } + saveTextarea.value += this.name + this._NAME_CONTENT_SEP + this.getValue(true); + } + }, + + + escapeXml: function(/*String*/ str, /*Boolean*/ noSingleQuotes){ + // summary: + // Adds escape sequences for special characters in XML. + // Optionally skips escapes for single quotes + // tags: + // private + + str = str.replace(/&/gm, "&").replace(/</gm, "<").replace(/>/gm, ">").replace(/"/gm, """); + if(!noSingleQuotes){ + str = str.replace(/'/gm, "'"); + } + return str; // string + }, + + getNodeHtml: function(/* DomNode */ node){ + // summary: + // Deprecated. Use dijit/_editor/html::_getNodeHtml() instead. + // tags: + // deprecated + kernel.deprecated('dijit.Editor::getNodeHtml is deprecated','use dijit/_editor/html::getNodeHtml instead', 2); + return htmlapi.getNodeHtml(node); // String + }, + + getNodeChildrenHtml: function(/* DomNode */ dom){ + // summary: + // Deprecated. Use dijit/_editor/html::getChildrenHtml() instead. + // tags: + // deprecated + kernel.deprecated('dijit.Editor::getNodeChildrenHtml is deprecated','use dijit/_editor/html::getChildrenHtml instead', 2); + return htmlapi.getChildrenHtml(dom); + }, + + close: function(/*Boolean?*/ save){ + // summary: + // Kills the editor and optionally writes back the modified contents to the + // element from which it originated. + // save: + // Whether or not to save the changes. If false, the changes are discarded. + // tags: + // private + + if(this.isClosed){ return; } + + if(!arguments.length){ save = true; } + if(save){ + this._set("value", this.getValue(true)); + } + + // line height is squashed for iframes + // FIXME: why was this here? if(this.iframe){ this.domNode.style.lineHeight = null; } + + if(this.interval){ clearInterval(this.interval); } + + if(this._webkitListener){ + //Cleaup of WebKit fix: #9532 + this.disconnect(this._webkitListener); + delete this._webkitListener; + } + + // Guard against memory leaks on IE (see #9268) + if(has("ie")){ + this.iframe.onfocus = null; + } + this.iframe._loadFunc = null; + + if(this._iframeRegHandle){ + this._iframeRegHandle.remove(); + delete this._iframeRegHandle; + } + + if(this.textarea){ + var s = this.textarea.style; + s.position = ""; + s.left = s.top = ""; + if(has("ie")){ + s.overflow = this.__overflow; + this.__overflow = null; + } + this.textarea.value = this.value; + domConstruct.destroy(this.domNode); + this.domNode = this.textarea; + }else{ + // Note that this destroys the iframe + this.domNode.innerHTML = this.value; + } + delete this.iframe; + + domClass.remove(this.domNode, this.baseClass); + this.isClosed = true; + this.isLoaded = false; + + delete this.editNode; + delete this.focusNode; + + if(this.window && this.window._frameElement){ + this.window._frameElement = null; + } + + this.window = null; + this.document = null; + this.editingArea = null; + this.editorObject = null; + }, + + destroy: function(){ + if(!this.isClosed){ this.close(false); } + if(this._updateTimer){ + this._updateTimer.remove(); + } + this.inherited(arguments); + if(RichText._globalSaveHandler){ + delete RichText._globalSaveHandler[this.id]; + } + }, + + _removeMozBogus: function(/* String */ html){ + // summary: + // Post filter to remove unwanted HTML attributes generated by mozilla + // tags: + // private + return html.replace(/\stype="_moz"/gi, '').replace(/\s_moz_dirty=""/gi, '').replace(/_moz_resizing="(true|false)"/gi,''); // String + }, + _removeWebkitBogus: function(/* String */ html){ + // summary: + // Post filter to remove unwanted HTML attributes generated by webkit + // tags: + // private + html = html.replace(/\sclass="webkit-block-placeholder"/gi, ''); + html = html.replace(/\sclass="apple-style-span"/gi, ''); + // For some reason copy/paste sometime adds extra meta tags for charset on + // webkit (chrome) on mac.They need to be removed. See: #12007" + html = html.replace(/<meta charset=\"utf-8\" \/>/gi, ''); + return html; // String + }, + _normalizeFontStyle: function(/* String */ html){ + // summary: + // Convert 'strong' and 'em' to 'b' and 'i'. + // description: + // Moz can not handle strong/em tags correctly, so to help + // mozilla and also to normalize output, convert them to 'b' and 'i'. + // + // Note the IE generates 'strong' and 'em' rather than 'b' and 'i' + // tags: + // private + return html.replace(/<(\/)?strong([ \>])/gi, '<$1b$2') + .replace(/<(\/)?em([ \>])/gi, '<$1i$2' ); // String + }, + + _preFixUrlAttributes: function(/* String */ html){ + // summary: + // Pre-filter to do fixing to href attributes on `<a>` and `<img>` tags + // tags: + // private + return html.replace(/(?:(<a(?=\s).*?\shref=)("|')(.*?)\2)|(?:(<a\s.*?href=)([^"'][^ >]+))/gi, + '$1$4$2$3$5$2 _djrealurl=$2$3$5$2') + .replace(/(?:(<img(?=\s).*?\ssrc=)("|')(.*?)\2)|(?:(<img\s.*?src=)([^"'][^ >]+))/gi, + '$1$4$2$3$5$2 _djrealurl=$2$3$5$2'); // String + }, + + /***************************************************************************** + The following functions implement HTML manipulation commands for various + browser/contentEditable implementations. The goal of them is to enforce + standard behaviors of them. + ******************************************************************************/ + + /*** queryCommandEnabled implementations ***/ + + _browserQueryCommandEnabled: function(command){ + // summary: + // Implementation to call to the native queryCommandEnabled of the browser. + // command: + // The command to check. + // tags: + // protected + if(!command) { return false; } + var elem = has("ie") ? this.document.selection.createRange() : this.document; + try{ + return elem.queryCommandEnabled(command); + }catch(e){ + return false; + } + }, + + _createlinkEnabledImpl: function(/*===== argument =====*/){ + // summary: + // This function implements the test for if the create link + // command should be enabled or not. + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var enabled = true; + if(has("opera")){ + var sel = this.window.getSelection(); + if(sel.isCollapsed){ + enabled = true; + }else{ + enabled = this.document.queryCommandEnabled("createlink"); + } + }else{ + enabled = this._browserQueryCommandEnabled("createlink"); + } + return enabled; + }, + + _unlinkEnabledImpl: function(/*===== argument =====*/){ + // summary: + // This function implements the test for if the unlink + // command should be enabled or not. + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var enabled = true; + if(has("mozilla") || has("webkit")){ + enabled = this._sCall("hasAncestorElement", ["a"]); + }else{ + enabled = this._browserQueryCommandEnabled("unlink"); + } + return enabled; + }, + + _inserttableEnabledImpl: function(/*===== argument =====*/){ + // summary: + // This function implements the test for if the inserttable + // command should be enabled or not. + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var enabled = true; + if(has("mozilla") || has("webkit")){ + enabled = true; + }else{ + enabled = this._browserQueryCommandEnabled("inserttable"); + } + return enabled; + }, + + _cutEnabledImpl: function(/*===== argument =====*/){ + // summary: + // This function implements the test for if the cut + // command should be enabled or not. + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var enabled = true; + if(has("webkit")){ + // WebKit deems clipboard activity as a security threat and natively would return false + var sel = this.window.getSelection(); + if(sel){ sel = sel.toString(); } + enabled = !!sel; + }else{ + enabled = this._browserQueryCommandEnabled("cut"); + } + return enabled; + }, + + _copyEnabledImpl: function(/*===== argument =====*/){ + // summary: + // This function implements the test for if the copy + // command should be enabled or not. + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var enabled = true; + if(has("webkit")){ + // WebKit deems clipboard activity as a security threat and natively would return false + var sel = this.window.getSelection(); + if(sel){ sel = sel.toString(); } + enabled = !!sel; + }else{ + enabled = this._browserQueryCommandEnabled("copy"); + } + return enabled; + }, + + _pasteEnabledImpl: function(/*===== argument =====*/){ + // summary:c + // This function implements the test for if the paste + // command should be enabled or not. + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var enabled = true; + if(has("webkit")){ + return true; + }else{ + enabled = this._browserQueryCommandEnabled("paste"); + } + return enabled; + }, + + /*** execCommand implementations ***/ + + _inserthorizontalruleImpl: function(argument){ + // summary: + // This function implements the insertion of HTML 'HR' tags. + // into a point on the page. IE doesn't to it right, so + // we have to use an alternate form + // argument: + // arguments to the exec command, if any. + // tags: + // protected + if(has("ie")){ + return this._inserthtmlImpl("<hr>"); + } + return this.document.execCommand("inserthorizontalrule", false, argument); + }, + + _unlinkImpl: function(argument){ + // summary: + // This function implements the unlink of an 'a' tag. + // argument: + // arguments to the exec command, if any. + // tags: + // protected + if((this.queryCommandEnabled("unlink")) && (has("mozilla") || has("webkit"))){ + var a = this._sCall("getAncestorElement", [ "a" ]); + this._sCall("selectElement", [ a ]); + return this.document.execCommand("unlink", false, null); + } + return this.document.execCommand("unlink", false, argument); + }, + + _hilitecolorImpl: function(argument){ + // summary: + // This function implements the hilitecolor command + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var returnValue; + var isApplied = this._handleTextColorOrProperties("hilitecolor", argument); + if(!isApplied){ + if(has("mozilla")){ + // mozilla doesn't support hilitecolor properly when useCSS is + // set to false (bugzilla #279330) + this.document.execCommand("styleWithCSS", false, true); + console.log("Executing color command."); + returnValue = this.document.execCommand("hilitecolor", false, argument); + this.document.execCommand("styleWithCSS", false, false); + }else{ + returnValue = this.document.execCommand("hilitecolor", false, argument); + } + } + return returnValue; + }, + + _backcolorImpl: function(argument){ + // summary: + // This function implements the backcolor command + // argument: + // arguments to the exec command, if any. + // tags: + // protected + if(has("ie")){ + // Tested under IE 6 XP2, no problem here, comment out + // IE weirdly collapses ranges when we exec these commands, so prevent it + // var tr = this.document.selection.createRange(); + argument = argument ? argument : null; + } + var isApplied = this._handleTextColorOrProperties("backcolor", argument); + if(!isApplied){ + isApplied = this.document.execCommand("backcolor", false, argument); + } + return isApplied; + }, + + _forecolorImpl: function(argument){ + // summary: + // This function implements the forecolor command + // argument: + // arguments to the exec command, if any. + // tags: + // protected + if(has("ie")){ + // Tested under IE 6 XP2, no problem here, comment out + // IE weirdly collapses ranges when we exec these commands, so prevent it + // var tr = this.document.selection.createRange(); + argument = argument? argument : null; + } + var isApplied = false; + isApplied = this._handleTextColorOrProperties("forecolor", argument); + if(!isApplied){ + isApplied = this.document.execCommand("forecolor", false, argument); + } + return isApplied; + }, + + _inserthtmlImpl: function(argument){ + // summary: + // This function implements the insertion of HTML content into + // a point on the page. + // argument: + // The content to insert, if any. + // tags: + // protected + argument = this._preFilterContent(argument); + var rv = true; + if(has("ie")){ + var insertRange = this.document.selection.createRange(); + if(this.document.selection.type.toUpperCase() === 'CONTROL'){ + var n=insertRange.item(0); + while(insertRange.length){ + insertRange.remove(insertRange.item(0)); + } + n.outerHTML=argument; + }else{ + insertRange.pasteHTML(argument); + } + insertRange.select(); + //insertRange.collapse(true); + }else if(has("mozilla") && !argument.length){ + //mozilla can not inserthtml an empty html to delete current selection + //so we delete the selection instead in this case + this._sCall("remove"); // FIXME + }else{ + rv = this.document.execCommand("inserthtml", false, argument); + } + return rv; + }, + + _boldImpl: function(argument){ + // summary: + // This function implements an over-ride of the bold command. + // argument: + // Not used, operates by selection. + // tags: + // protected + var applied = false; + if(has("ie")){ + this._adaptIESelection(); + applied = this._adaptIEFormatAreaAndExec("bold"); + } + if(!applied){ + applied = this.document.execCommand("bold", false, argument); + } + return applied; + }, + + _italicImpl: function(argument){ + // summary: + // This function implements an over-ride of the italic command. + // argument: + // Not used, operates by selection. + // tags: + // protected + var applied = false; + if(has("ie")){ + this._adaptIESelection(); + applied = this._adaptIEFormatAreaAndExec("italic"); + } + if(!applied){ + applied = this.document.execCommand("italic", false, argument); + } + return applied; + }, + + _underlineImpl: function(argument){ + // summary: + // This function implements an over-ride of the underline command. + // argument: + // Not used, operates by selection. + // tags: + // protected + var applied = false; + if(has("ie")){ + this._adaptIESelection(); + applied = this._adaptIEFormatAreaAndExec("underline"); + } + if(!applied){ + applied = this.document.execCommand("underline", false, argument); + } + return applied; + }, + + _strikethroughImpl: function(argument){ + // summary: + // This function implements an over-ride of the strikethrough command. + // argument: + // Not used, operates by selection. + // tags: + // protected + var applied = false; + if(has("ie")){ + this._adaptIESelection(); + applied = this._adaptIEFormatAreaAndExec("strikethrough"); + } + if(!applied){ + applied = this.document.execCommand("strikethrough", false, argument); + } + return applied; + }, + + _superscriptImpl: function(argument){ + // summary: + // This function implements an over-ride of the superscript command. + // argument: + // Not used, operates by selection. + // tags: + // protected + var applied = false; + if(has("ie")){ + this._adaptIESelection(); + applied = this._adaptIEFormatAreaAndExec("superscript"); + } + if(!applied){ + applied = this.document.execCommand("superscript", false, argument); + } + return applied; + }, + + _subscriptImpl: function(argument){ + // summary: + // This function implements an over-ride of the superscript command. + // argument: + // Not used, operates by selection. + // tags: + // protected + var applied = false; + if(has("ie")){ + this._adaptIESelection(); + applied = this._adaptIEFormatAreaAndExec("subscript"); + + } + if(!applied){ + applied = this.document.execCommand("subscript", false, argument); + } + return applied; + }, + + _fontnameImpl: function(argument){ + // summary: + // This function implements the fontname command + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var isApplied; + if(has("ie")){ + isApplied = this._handleTextColorOrProperties("fontname", argument); + } + if(!isApplied){ + isApplied = this.document.execCommand("fontname", false, argument); + } + return isApplied; + }, + + _fontsizeImpl: function(argument){ + // summary: + // This function implements the fontsize command + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var isApplied; + if(has("ie")){ + isApplied = this._handleTextColorOrProperties("fontsize", argument); + } + if(!isApplied){ + isApplied = this.document.execCommand("fontsize", false, argument); + } + return isApplied; + }, + + _insertorderedlistImpl: function(argument){ + // summary: + // This function implements the insertorderedlist command + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var applied = false; + if(has("ie")){ + applied = this._adaptIEList("insertorderedlist", argument); + } + if(!applied){ + applied = this.document.execCommand("insertorderedlist", false, argument); + } + return applied; + }, + + _insertunorderedlistImpl: function(argument){ + // summary: + // This function implements the insertunorderedlist command + // argument: + // arguments to the exec command, if any. + // tags: + // protected + var applied = false; + if(has("ie")){ + applied = this._adaptIEList("insertunorderedlist", argument); + } + if(!applied){ + applied = this.document.execCommand("insertunorderedlist", false, argument); + } + return applied; + }, + + getHeaderHeight: function(){ + // summary: + // A function for obtaining the height of the header node + return this._getNodeChildrenHeight(this.header); // Number + }, + + getFooterHeight: function(){ + // summary: + // A function for obtaining the height of the footer node + return this._getNodeChildrenHeight(this.footer); // Number + }, + + _getNodeChildrenHeight: function(node){ + // summary: + // An internal function for computing the cumulative height of all child nodes of 'node' + // node: + // The node to process the children of; + var h = 0; + if(node && node.childNodes){ + // IE didn't compute it right when position was obtained on the node directly is some cases, + // so we have to walk over all the children manually. + var i; + for(i = 0; i < node.childNodes.length; i++){ + var size = domGeometry.position(node.childNodes[i]); + h += size.h; + } + } + return h; // Number + }, + + _isNodeEmpty: function(node, startOffset){ + // summary: + // Function to test if a node is devoid of real content. + // node: + // The node to check. + // tags: + // private. + if(node.nodeType === 1/*element*/){ + if(node.childNodes.length > 0){ + return this._isNodeEmpty(node.childNodes[0], startOffset); + } + return true; + }else if(node.nodeType === 3/*text*/){ + return (node.nodeValue.substring(startOffset) === ""); + } + return false; + }, + + _removeStartingRangeFromRange: function(node, range){ + // summary: + // Function to adjust selection range by removing the current + // start node. + // node: + // The node to remove from the starting range. + // range: + // The range to adapt. + // tags: + // private + if(node.nextSibling){ + range.setStart(node.nextSibling,0); + }else{ + var parent = node.parentNode; + while(parent && parent.nextSibling == null){ + //move up the tree until we find a parent that has another node, that node will be the next node + parent = parent.parentNode; + } + if(parent){ + range.setStart(parent.nextSibling,0); + } + } + return range; + }, + + _adaptIESelection: function(){ + // summary: + // Function to adapt the IE range by removing leading 'newlines' + // Needed to fix issue with bold/italics/underline not working if + // range included leading 'newlines'. + // In IE, if a user starts a selection at the very end of a line, + // then the native browser commands will fail to execute correctly. + // To work around the issue, we can remove all empty nodes from + // the start of the range selection. + var selection = rangeapi.getSelection(this.window); + if(selection && selection.rangeCount && !selection.isCollapsed){ + var range = selection.getRangeAt(0); + var firstNode = range.startContainer; + var startOffset = range.startOffset; + + while(firstNode.nodeType === 3/*text*/ && startOffset >= firstNode.length && firstNode.nextSibling){ + //traverse the text nodes until we get to the one that is actually highlighted + startOffset = startOffset - firstNode.length; + firstNode = firstNode.nextSibling; + } + + //Remove the starting ranges until the range does not start with an empty node. + var lastNode=null; + while(this._isNodeEmpty(firstNode, startOffset) && firstNode !== lastNode){ + lastNode =firstNode; //this will break the loop in case we can't find the next sibling + range = this._removeStartingRangeFromRange(firstNode, range); //move the start container to the next node in the range + firstNode = range.startContainer; + startOffset = 0; //start at the beginning of the new starting range + } + selection.removeAllRanges();// this will work as long as users cannot select multiple ranges. I have not been able to do that in the editor. + selection.addRange(range); + } + }, + + _adaptIEFormatAreaAndExec: function(command){ + // summary: + // Function to handle IE's quirkiness regarding how it handles + // format commands on a word. This involves a lit of node splitting + // and format cloning. + // command: + // The format command, needed to check if the desired + // command is true or not. + var selection = rangeapi.getSelection(this.window); + var doc = this.document; + var rs, ret, range, txt, startNode, endNode, breaker, sNode; + if(command && selection && selection.isCollapsed){ + var isApplied = this.queryCommandValue(command); + if(isApplied){ + + // We have to split backwards until we hit the format + var nNames = this._tagNamesForCommand(command); + range = selection.getRangeAt(0); + var fs = range.startContainer; + if(fs.nodeType === 3){ + var offset = range.endOffset; + if(fs.length < offset){ + //We are not looking from the right node, try to locate the correct one + ret = this._adjustNodeAndOffset(rs, offset); + fs = ret.node; + offset = ret.offset; + } + } + var topNode; + while(fs && fs !== this.editNode){ + // We have to walk back and see if this is still a format or not. + // Hm, how do I do this? + var tName = fs.tagName? fs.tagName.toLowerCase() : ""; + if(array.indexOf(nNames, tName) > -1){ + topNode = fs; + break; + } + fs = fs.parentNode; + } + + // Okay, we have a stopping place, time to split things apart. + if(topNode){ + // Okay, we know how far we have to split backwards, so we have to split now. + rs = range.startContainer; + var newblock = doc.createElement(topNode.tagName); + domConstruct.place(newblock, topNode, "after"); + if(rs && rs.nodeType === 3){ + // Text node, we have to split it. + var nodeToMove, tNode; + var endOffset = range.endOffset; + if(rs.length < endOffset){ + //We are not splitting the right node, try to locate the correct one + ret = this._adjustNodeAndOffset(rs, endOffset); + rs = ret.node; + endOffset = ret.offset; + } + + txt = rs.nodeValue; + startNode = doc.createTextNode(txt.substring(0, endOffset)); + var endText = txt.substring(endOffset, txt.length); + if(endText){ + endNode = doc.createTextNode(endText); + } + // Place the split, then remove original nodes. + domConstruct.place(startNode, rs, "before"); + if(endNode){ + breaker = doc.createElement("span"); + breaker.className = "ieFormatBreakerSpan"; + domConstruct.place(breaker, rs, "after"); + domConstruct.place(endNode, breaker, "after"); + endNode = breaker; + } + domConstruct.destroy(rs); + + // Okay, we split the text. Now we need to see if we're + // parented to the block element we're splitting and if + // not, we have to split all the way up. Ugh. + var parentC = startNode.parentNode; + var tagList = []; + var tagData; + while(parentC !== topNode){ + var tg = parentC.tagName; + tagData = {tagName: tg}; + tagList.push(tagData); + + var newTg = doc.createElement(tg); + // Clone over any 'style' data. + if(parentC.style){ + if(newTg.style){ + if(parentC.style.cssText){ + newTg.style.cssText = parentC.style.cssText; + tagData.cssText = parentC.style.cssText; + } + } + } + // If font also need to clone over any font data. + if(parentC.tagName === "FONT"){ + if(parentC.color){ + newTg.color = parentC.color; + tagData.color = parentC.color; + } + if(parentC.face){ + newTg.face = parentC.face; + tagData.face = parentC.face; + } + if(parentC.size){ // this check was necessary on IE + newTg.size = parentC.size; + tagData.size = parentC.size; + } + } + if(parentC.className){ + newTg.className = parentC.className; + tagData.className = parentC.className; + } + + // Now move end node and every sibling + // after it over into the new tag. + if(endNode){ + nodeToMove = endNode; + while(nodeToMove){ + tNode = nodeToMove.nextSibling; + newTg.appendChild(nodeToMove); + nodeToMove = tNode; + } + } + if(newTg.tagName == parentC.tagName){ + breaker = doc.createElement("span"); + breaker.className = "ieFormatBreakerSpan"; + domConstruct.place(breaker, parentC, "after"); + domConstruct.place(newTg, breaker, "after"); + }else{ + domConstruct.place(newTg, parentC, "after"); + } + startNode = parentC; + endNode = newTg; + parentC = parentC.parentNode; + } + + // Lastly, move the split out all the split tags + // to the new block as they should now be split properly. + if(endNode){ + nodeToMove = endNode; + if(nodeToMove.nodeType === 1 || (nodeToMove.nodeType === 3 && nodeToMove.nodeValue)){ + // Non-blank text and non-text nodes need to clear out that blank space + // before moving the contents. + newblock.innerHTML = ""; + } + while(nodeToMove){ + tNode = nodeToMove.nextSibling; + newblock.appendChild(nodeToMove); + nodeToMove = tNode; + } + } + + // We had intermediate tags, we have to now recreate them inbetween the split + // and restore what styles, classnames, etc, we can. + var newrange; + if(tagList.length){ + tagData = tagList.pop(); + var newContTag = doc.createElement(tagData.tagName); + if(tagData.cssText && newContTag.style){ + newContTag.style.cssText = tagData.cssText; + } + if(tagData.className){ + newContTag.className = tagData.className; + } + if(tagData.tagName === "FONT"){ + if(tagData.color){ + newContTag.color = tagData.color; + } + if(tagData.face){ + newContTag.face = tagData.face; + } + if(tagData.size){ + newContTag.size = tagData.size; + } + } + domConstruct.place(newContTag, newblock, "before"); + while(tagList.length){ + tagData = tagList.pop(); + var newTgNode = doc.createElement(tagData.tagName); + if(tagData.cssText && newTgNode.style){ + newTgNode.style.cssText = tagData.cssText; + } + if(tagData.className){ + newTgNode.className = tagData.className; + } + if(tagData.tagName === "FONT"){ + if(tagData.color){ + newTgNode.color = tagData.color; + } + if(tagData.face){ + newTgNode.face = tagData.face; + } + if(tagData.size){ + newTgNode.size = tagData.size; + } + } + newContTag.appendChild(newTgNode); + newContTag = newTgNode; + } + + // Okay, everything is theoretically split apart and removed from the content + // so insert the dummy text to select, select it, then + // clear to position cursor. + sNode = doc.createTextNode("."); + breaker.appendChild(sNode); + newContTag.appendChild(sNode); + newrange = rangeapi.create(this.window); + newrange.setStart(sNode, 0); + newrange.setEnd(sNode, sNode.length); + selection.removeAllRanges(); + selection.addRange(newrange); + this._sCall("collapse", [false]); + sNode.parentNode.innerHTML = ""; + }else{ + // No extra tags, so we have to insert a breaker point and rely + // on filters to remove it later. + breaker = doc.createElement("span"); + breaker.className="ieFormatBreakerSpan"; + sNode = doc.createTextNode("."); + breaker.appendChild(sNode); + domConstruct.place(breaker, newblock, "before"); + newrange = rangeapi.create(this.window); + newrange.setStart(sNode, 0); + newrange.setEnd(sNode, sNode.length); + selection.removeAllRanges(); + selection.addRange(newrange); + this._sCall("collapse", [false]); + sNode.parentNode.innerHTML = ""; + } + if(!newblock.firstChild){ + // Empty, we don't need it. Split was at end or similar + // So, remove it. + domConstruct.destroy(newblock); + } + return true; + } + } + return false; + }else{ + range = selection.getRangeAt(0); + rs = range.startContainer; + if(rs && rs.nodeType === 3){ + // Text node, we have to split it. + var offset = range.startOffset; + if(rs.length < offset){ + //We are not splitting the right node, try to locate the correct one + ret = this._adjustNodeAndOffset(rs, offset); + rs = ret.node; + offset = ret.offset; + } + txt = rs.nodeValue; + startNode = doc.createTextNode(txt.substring(0, offset)); + var endText = txt.substring(offset); + if(endText !== ""){ + endNode = doc.createTextNode(txt.substring(offset)); + } + // Create a space, we'll select and bold it, so + // the whole word doesn't get bolded + breaker = doc.createElement("span"); + sNode = doc.createTextNode("."); + breaker.appendChild(sNode); + if(startNode.length){ + domConstruct.place(startNode, rs, "after"); + }else{ + startNode = rs; + } + domConstruct.place(breaker, startNode, "after"); + if(endNode){ + domConstruct.place(endNode, breaker, "after"); + } + domConstruct.destroy(rs); + var newrange = rangeapi.create(this.window); + newrange.setStart(sNode, 0); + newrange.setEnd(sNode, sNode.length); + selection.removeAllRanges(); + selection.addRange(newrange); + doc.execCommand(command); + domConstruct.place(breaker.firstChild, breaker, "before"); + domConstruct.destroy(breaker); + newrange.setStart(sNode, 0); + newrange.setEnd(sNode, sNode.length); + selection.removeAllRanges(); + selection.addRange(newrange); + this._sCall("collapse", [false]); + sNode.parentNode.innerHTML = ""; + return true; + } + } + }else{ + return false; + } + }, + + _adaptIEList: function(command /*===== , argument =====*/){ + // summary: + // This function handles normalizing the IE list behavior as + // much as possible. + // command: + // The list command to execute. + // argument: + // Any additional argument. + // tags: + // private + var selection = rangeapi.getSelection(this.window); + if(selection.isCollapsed){ + // In the case of no selection, lets commonize the behavior and + // make sure that it indents if needed. + if(selection.rangeCount && !this.queryCommandValue(command)){ + var range = selection.getRangeAt(0); + var sc = range.startContainer; + if(sc && sc.nodeType == 3){ + // text node. Lets see if there is a node before it that isn't + // some sort of breaker. + if(!range.startOffset){ + // We're at the beginning of a text area. It may have been br split + // Who knows? In any event, we must create the list manually + // or IE may shove too much into the list element. It seems to + // grab content before the text node too if it's br split. + // Why can't IE work like everyone else? + + // Create a space, we'll select and bold it, so + // the whole word doesn't get bolded + var lType = "ul"; + if(command === "insertorderedlist"){ + lType = "ol"; + } + var list = this.document.createElement(lType); + var li = domConstruct.create("li", null, list); + domConstruct.place(list, sc, "before"); + // Move in the text node as part of the li. + li.appendChild(sc); + // We need a br after it or the enter key handler + // sometimes throws errors. + domConstruct.create("br", null, list, "after"); + // Okay, now lets move our cursor to the beginning. + var newrange = rangeapi.create(this.window); + newrange.setStart(sc, 0); + newrange.setEnd(sc, sc.length); + selection.removeAllRanges(); + selection.addRange(newrange); + this._sCall("collapse", [true]); + return true; + } + } + } + } + return false; + }, + + _handleTextColorOrProperties: function(command, argument){ + // summary: + // This function handles appplying text color as best it is + // able to do so when the selection is collapsed, making the + // behavior cross-browser consistent. It also handles the name + // and size for IE. + // command: + // The command. + // argument: + // Any additional arguments. + // tags: + // private + var selection = rangeapi.getSelection(this.window); + var doc = this.document; + var rs, ret, range, txt, startNode, endNode, breaker, sNode; + argument = argument || null; + if(command && selection && selection.isCollapsed){ + if(selection.rangeCount){ + range = selection.getRangeAt(0); + rs = range.startContainer; + if(rs && rs.nodeType === 3){ + // Text node, we have to split it. + var offset = range.startOffset; + if(rs.length < offset){ + //We are not splitting the right node, try to locate the correct one + ret = this._adjustNodeAndOffset(rs, offset); + rs = ret.node; + offset = ret.offset; + } + txt = rs.nodeValue; + startNode = doc.createTextNode(txt.substring(0, offset)); + var endText = txt.substring(offset); + if(endText !== ""){ + endNode = doc.createTextNode(txt.substring(offset)); + } + // Create a space, we'll select and bold it, so + // the whole word doesn't get bolded + breaker = doc.createElement("span"); + sNode = doc.createTextNode("."); + breaker.appendChild(sNode); + // Create a junk node to avoid it trying to style the breaker. + // This will get destroyed later. + var extraSpan = doc.createElement("span"); + breaker.appendChild(extraSpan); + if(startNode.length){ + domConstruct.place(startNode, rs, "after"); + }else{ + startNode = rs; + } + domConstruct.place(breaker, startNode, "after"); + if(endNode){ + domConstruct.place(endNode, breaker, "after"); + } + domConstruct.destroy(rs); + var newrange = rangeapi.create(this.window); + newrange.setStart(sNode, 0); + newrange.setEnd(sNode, sNode.length); + selection.removeAllRanges(); + selection.addRange(newrange); + if(has("webkit")){ + // WebKit is frustrating with positioning the cursor. + // It stinks to have a selected space, but there really + // isn't much choice here. + var style = "color"; + if(command === "hilitecolor" || command === "backcolor"){ + style = "backgroundColor"; + } + domStyle.set(breaker, style, argument); + this._sCall("remove", []); + domConstruct.destroy(extraSpan); + breaker.innerHTML = " "; // + this._sCall("selectElement", [breaker]); + this.focus(); + }else{ + this.execCommand(command, argument); + domConstruct.place(breaker.firstChild, breaker, "before"); + domConstruct.destroy(breaker); + newrange.setStart(sNode, 0); + newrange.setEnd(sNode, sNode.length); + selection.removeAllRanges(); + selection.addRange(newrange); + this._sCall("collapse", [false]); + sNode.parentNode.removeChild(sNode); + } + return true; + } + } + } + return false; + }, + + _adjustNodeAndOffset: function(/*DomNode*/node, /*Int*/offset){ + // summary: + // In the case there are multiple text nodes in a row the offset may not be within the node. + // If the offset is larger than the node length, it will attempt to find + // the next text sibling until it locates the text node in which the offset refers to + // node: + // The node to check. + // offset: + // The position to find within the text node + // tags: + // private. + while(node.length < offset && node.nextSibling && node.nextSibling.nodeType === 3){ + //Adjust the offset and node in the case of multiple text nodes in a row + offset = offset - node.length; + node = node.nextSibling; + } + return {"node": node, "offset": offset}; + }, + + _tagNamesForCommand: function(command){ + // summary: + // Function to return the tab names that are associated + // with a particular style. + // command: String + // The command to return tags for. + // tags: + // private + if(command === "bold"){ + return ["b", "strong"]; + }else if(command === "italic"){ + return ["i","em"]; + }else if(command === "strikethrough"){ + return ["s", "strike"]; + }else if(command === "superscript"){ + return ["sup"]; + }else if(command === "subscript"){ + return ["sub"]; + }else if(command === "underline"){ + return ["u"]; + } + return []; + }, + + _stripBreakerNodes: function(/*DOMNode*/ node){ + // summary: + // Function for stripping out the breaker spans inserted by the formatting command. + // Registered as a filter for IE, handles the breaker spans needed to fix up + // How bold/italic/etc, work when selection is collapsed (single cursor). + if(!this.isLoaded){ return; } // this method requires init to be complete + query(".ieFormatBreakerSpan", node).forEach(function(b){ + while(b.firstChild){ + domConstruct.place(b.firstChild, b, "before"); + } + domConstruct.destroy(b); + }); + return node; + } +}); + +return RichText; + +}); |