' + html).contents().slice(1).appendTo(target); + } + + return html; + }); + } else { + elm.html(html); + } + }, + + /** + * Returns the outer HTML of an element. + * + * @method getOuterHTML + * @param {String/Element} elm Element ID or element object to get outer HTML from. + * @return {String} Outer HTML string. + * @example + * tinymce.DOM.getOuterHTML(editorElement); + * tinymce.activeEditor.getOuterHTML(tinymce.activeEditor.getBody()); + */ + getOuterHTML: function(elm) { + elm = this.get(elm); + + // Older FF doesn't have outerHTML 3.6 is still used by some orgaizations + return elm.nodeType == 1 && "outerHTML" in elm ? elm.outerHTML : $('
').append($(elm).clone()).html();
+ },
+
+ /**
+ * Sets the specified outer HTML on an element or elements.
+ *
+ * @method setOuterHTML
+ * @param {Element/String/Array} elm DOM element, element id string or array of elements/ids to set outer HTML on.
+ * @param {Object} html HTML code to set as outer value for the element.
+ * @param {Document} doc Optional document scope to use in this process - defaults to the document of the DOM class.
+ * @example
+ * // Sets the outer HTML of all paragraphs in the active editor
+ * tinymce.activeEditor.dom.setOuterHTML(tinymce.activeEditor.dom.select('p'), '![]()
+ name = node.nodeName.toLowerCase();
+ if (elements && elements[name]) {
+ // Ignore single BR elements in blocks like
some html
');
+ *
+ * // Sets the outer HTML of an element by id in the document
+ * tinymce.DOM.setOuterHTML('mydiv', 'some html
');
+ */
+ setOuterHTML: function(elm, html) {
+ var self = this;
+
+ self.$$(elm).each(function() {
+ try {
+ // Older FF doesn't have outerHTML 3.6 is still used by some orgaizations
+ if ("outerHTML" in this) {
+ this.outerHTML = html;
+ return;
+ }
+ } catch (ex) {
+ // Ignore
+ }
+
+ // OuterHTML for IE it sometimes produces an "unknown runtime error"
+ self.remove($(this).html(html), true);
+ });
+ },
+
+ /**
+ * Entity decodes a string. This method decodes any HTML entities, such as å.
+ *
+ * @method decode
+ * @param {String} s String to decode entities on.
+ * @return {String} Entity decoded string.
+ */
+ decode: Entities.decode,
+
+ /**
+ * Entity encodes a string. This method encodes the most common entities, such as <>"&.
+ *
+ * @method encode
+ * @param {String} text String to encode with entities.
+ * @return {String} Entity encoded string.
+ */
+ encode: Entities.encodeAllRaw,
+
+ /**
+ * Inserts an element after the reference element.
+ *
+ * @method insertAfter
+ * @param {Element} node Element to insert after the reference.
+ * @param {Element/String/Array} reference_node Reference element, element id or array of elements to insert after.
+ * @return {Element/Array} Element that got added or an array with elements.
+ */
+ insertAfter: function(node, referenceNode) {
+ referenceNode = this.get(referenceNode);
+
+ return this.run(node, function(node) {
+ var parent, nextSibling;
+
+ parent = referenceNode.parentNode;
+ nextSibling = referenceNode.nextSibling;
+
+ if (nextSibling) {
+ parent.insertBefore(node, nextSibling);
+ } else {
+ parent.appendChild(node);
+ }
+
+ return node;
+ });
+ },
+
+ /**
+ * Replaces the specified element or elements with the new element specified. The new element will
+ * be cloned if multiple input elements are passed in.
+ *
+ * @method replace
+ * @param {Element} newElm New element to replace old ones with.
+ * @param {Element/String/Array} oldELm Element DOM node, element id or array of elements or ids to replace.
+ * @param {Boolean} k Optional keep children state, if set to true child nodes from the old object will be added to new ones.
+ */
+ replace: function(newElm, oldElm, keepChildren) {
+ var self = this;
+
+ return self.run(oldElm, function(oldElm) {
+ if (is(oldElm, 'array')) {
+ newElm = newElm.cloneNode(true);
+ }
+
+ if (keepChildren) {
+ each(grep(oldElm.childNodes), function(node) {
+ newElm.appendChild(node);
+ });
+ }
+
+ return oldElm.parentNode.replaceChild(newElm, oldElm);
+ });
+ },
+
+ /**
+ * Renames the specified element and keeps its attributes and children.
+ *
+ * @method rename
+ * @param {Element} elm Element to rename.
+ * @param {String} name Name of the new element.
+ * @return {Element} New element or the old element if it needed renaming.
+ */
+ rename: function(elm, name) {
+ var self = this, newElm;
+
+ if (elm.nodeName != name.toUpperCase()) {
+ // Rename block element
+ newElm = self.create(name);
+
+ // Copy attribs to new block
+ each(self.getAttribs(elm), function(attrNode) {
+ self.setAttrib(newElm, attrNode.nodeName, self.getAttrib(elm, attrNode.nodeName));
+ });
+
+ // Replace block
+ self.replace(newElm, elm, 1);
+ }
+
+ return newElm || elm;
+ },
+
+ /**
+ * Find the common ancestor of two elements. This is a shorter method than using the DOM Range logic.
+ *
+ * @method findCommonAncestor
+ * @param {Element} a Element to find common ancestor of.
+ * @param {Element} b Element to find common ancestor of.
+ * @return {Element} Common ancestor element of the two input elements.
+ */
+ findCommonAncestor: function(a, b) {
+ var ps = a, pe;
+
+ while (ps) {
+ pe = b;
+
+ while (pe && ps != pe) {
+ pe = pe.parentNode;
+ }
+
+ if (ps == pe) {
+ break;
+ }
+
+ ps = ps.parentNode;
+ }
+
+ if (!ps && a.ownerDocument) {
+ return a.ownerDocument.documentElement;
+ }
+
+ return ps;
+ },
+
+ /**
+ * Parses the specified RGB color value and returns a hex version of that color.
+ *
+ * @method toHex
+ * @param {String} rgbVal RGB string value like rgb(1,2,3)
+ * @return {String} Hex version of that RGB value like #FF00FF.
+ */
+ toHex: function(rgbVal) {
+ return this.styles.toHex(Tools.trim(rgbVal));
+ },
+
+ /**
+ * Executes the specified function on the element by id or dom element node or array of elements/id.
+ *
+ * @method run
+ * @param {String/Element/Array} Element ID or DOM element object or array with ids or elements.
+ * @param {function} f Function to execute for each item.
+ * @param {Object} s Optional scope to execute the function in.
+ * @return {Object/Array} Single object, or an array of objects if multiple input elements were passed in.
+ */
+ run: function(elm, func, scope) {
+ var self = this, result;
+
+ if (typeof elm === 'string') {
+ elm = self.get(elm);
+ }
+
+ if (!elm) {
+ return false;
+ }
+
+ scope = scope || this;
+ if (!elm.nodeType && (elm.length || elm.length === 0)) {
+ result = [];
+
+ each(elm, function(elm, i) {
+ if (elm) {
+ if (typeof elm == 'string') {
+ elm = self.get(elm);
+ }
+
+ result.push(func.call(scope, elm, i));
+ }
+ });
+
+ return result;
+ }
+
+ return func.call(scope, elm);
+ },
+
+ /**
+ * Returns a NodeList with attributes for the element.
+ *
+ * @method getAttribs
+ * @param {HTMLElement/string} elm Element node or string id to get attributes from.
+ * @return {NodeList} NodeList with attributes.
+ */
+ getAttribs: function(elm) {
+ var attrs;
+
+ elm = this.get(elm);
+
+ if (!elm) {
+ return [];
+ }
+
+ if (isIE) {
+ attrs = [];
+
+ // Object will throw exception in IE
+ if (elm.nodeName == 'OBJECT') {
+ return elm.attributes;
+ }
+
+ // IE doesn't keep the selected attribute if you clone option elements
+ if (elm.nodeName === 'OPTION' && this.getAttrib(elm, 'selected')) {
+ attrs.push({specified: 1, nodeName: 'selected'});
+ }
+
+ // It's crazy that this is faster in IE but it's because it returns all attributes all the time
+ var attrRegExp = /<\/?[\w:\-]+ ?|=[\"][^\"]+\"|=\'[^\']+\'|=[\w\-]+|>/gi;
+ elm.cloneNode(false).outerHTML.replace(attrRegExp, '').replace(/[\w:\-]+/gi, function(a) {
+ attrs.push({specified: 1, nodeName: a});
+ });
+
+ return attrs;
+ }
+
+ return elm.attributes;
+ },
+
+ /**
+ * Returns true/false if the specified node is to be considered empty or not.
+ *
+ * @example
+ * tinymce.DOM.isEmpty(node, {img: true});
+ * @method isEmpty
+ * @param {Object} elements Optional name/value object with elements that are automatically treated as non-empty elements.
+ * @return {Boolean} true/false if the node is empty or not.
+ */
+ isEmpty: function(node, elements) {
+ var self = this, i, attributes, type, walker, name, brCount = 0;
+
+ node = node.firstChild;
+ if (node) {
+ walker = new TreeWalker(node, node.parentNode);
+ elements = elements || (self.schema ? self.schema.getNonEmptyElements() : null);
+
+ do {
+ type = node.nodeType;
+
+ if (type === 1) {
+ // Ignore bogus elements
+ if (node.getAttribute('data-mce-bogus')) {
+ continue;
+ }
+
+ // Keep empty elements like abcabc123
would produceabc
abc123
. + * + * @method split + * @param {Element} parentElm Parent element to split. + * @param {Element} splitElm Element to split at. + * @param {Element} replacementElm Optional replacement element to replace the split element with. + * @return {Element} Returns the split element or the replacement element if that is specified. + */ + split: function(parentElm, splitElm, replacementElm) { + var self = this, r = self.createRng(), bef, aft, pa; + + // W3C valid browsers tend to leave empty nodes to the left/right side of the contents - this makes sense + // but we don't want that in our code since it serves no purpose for the end user + // For example splitting this html at the bold element: + //text 1CHOPtext 2
+ // would produce: + //text 1
CHOPtext 2
+ // this function will then trim off empty edges and produce: + //text 1
CHOPtext 2
+ function trimNode(node) { + var i, children = node.childNodes, type = node.nodeType; + + function surroundedBySpans(node) { + var previousIsSpan = node.previousSibling && node.previousSibling.nodeName == 'SPAN'; + var nextIsSpan = node.nextSibling && node.nextSibling.nodeName == 'SPAN'; + return previousIsSpan && nextIsSpan; + } + + if (type == 1 && node.getAttribute('data-mce-type') == 'bookmark') { + return; + } + + for (i = children.length - 1; i >= 0; i--) { + trimNode(children[i]); + } + + if (type != 9) { + // Keep non whitespace text nodes + if (type == 3 && node.nodeValue.length > 0) { + // If parent element isn't a block or there isn't any useful contents for example "" + // Also keep text nodes with only spaces if surrounded by spans. + // eg. "
a b
" should keep space between a and b + var trimmedLength = trim(node.nodeValue).length; + if (!self.isBlock(node.parentNode) || trimmedLength > 0 || trimmedLength === 0 && surroundedBySpans(node)) { + return; + } + } else if (type == 1) { + // If the only child is a bookmark then move it up + children = node.childNodes; + + // TODO fix this complex if + if (children.length == 1 && children[0] && children[0].nodeType == 1 && + children[0].getAttribute('data-mce-type') == 'bookmark') { + node.parentNode.insertBefore(children[0], node); + } + + // Keep non empty elements or img, hr etc + if (children.length || /^(br|hr|input|img)$/i.test(node.nodeName)) { + return; + } + } + + self.remove(node); + } + + return node; + } + + if (parentElm && splitElm) { + // Get before chunk + r.setStart(parentElm.parentNode, self.nodeIndex(parentElm)); + r.setEnd(splitElm.parentNode, self.nodeIndex(splitElm)); + bef = r.extractContents(); + + // Get after chunk + r = self.createRng(); + r.setStart(splitElm.parentNode, self.nodeIndex(splitElm) + 1); + r.setEnd(parentElm.parentNode, self.nodeIndex(parentElm) + 1); + aft = r.extractContents(); + + // Insert before chunk + pa = parentElm.parentNode; + pa.insertBefore(trimNode(bef), parentElm); + + // Insert middle chunk + if (replacementElm) { + pa.replaceChild(replacementElm, splitElm); + } else { + pa.insertBefore(splitElm, parentElm); + } + + // Insert after chunk + pa.insertBefore(trimNode(aft), parentElm); + self.remove(parentElm); + + return replacementElm || splitElm; + } + }, + + /** + * Adds an event handler to the specified object. + * + * @method bind + * @param {Element/Document/Window/Array} target Target element to bind events to. + * handler to or an array of elements/ids/documents. + * @param {String} name Name of event handler to add, for example: click. + * @param {function} func Function to execute when the event occurs. + * @param {Object} scope Optional scope to execute the function in. + * @return {function} Function callback handler the same as the one passed in. + */ + bind: function(target, name, func, scope) { + var self = this; + + if (Tools.isArray(target)) { + var i = target.length; + + while (i--) { + target[i] = self.bind(target[i], name, func, scope); + } + + return target; + } + + // Collect all window/document events bound by editor instance + if (self.settings.collect && (target === self.doc || target === self.win)) { + self.boundEvents.push([target, name, func, scope]); + } + + return self.events.bind(target, name, func, scope || self); + }, + + /** + * Removes the specified event handler by name and function from an element or collection of elements. + * + * @method unbind + * @param {Element/Document/Window/Array} target Target element to unbind events on. + * @param {String} name Event handler name, for example: "click" + * @param {function} func Function to remove. + * @return {bool/Array} Bool state of true if the handler was removed, or an array of states if multiple input elements + * were passed in. + */ + unbind: function(target, name, func) { + var self = this, i; + + if (Tools.isArray(target)) { + i = target.length; + + while (i--) { + target[i] = self.unbind(target[i], name, func); + } + + return target; + } + + // Remove any bound events matching the input + if (self.boundEvents && (target === self.doc || target === self.win)) { + i = self.boundEvents.length; + + while (i--) { + var item = self.boundEvents[i]; + + if (target == item[0] && (!name || name == item[1]) && (!func || func == item[2])) { + this.events.unbind(item[0], item[1], item[2]); + } + } + } + + return this.events.unbind(target, name, func); + }, + + /** + * Fires the specified event name with object on target. + * + * @method fire + * @param {Node/Document/Window} target Target element or object to fire event on. + * @param {String} name Name of the event to fire. + * @param {Object} evt Event object to send. + * @return {Event} Event object. + */ + fire: function(target, name, evt) { + return this.events.fire(target, name, evt); + }, + + // Returns the content editable state of a node + getContentEditable: function(node) { + var contentEditable; + + // Check type + if (!node || node.nodeType != 1) { + return null; + } + + // Check for fake content editable + contentEditable = node.getAttribute("data-mce-contenteditable"); + if (contentEditable && contentEditable !== "inherit") { + return contentEditable; + } + + // Check for real content editable + return node.contentEditable !== "inherit" ? node.contentEditable : null; + }, + + getContentEditableParent: function(node) { + var root = this.getRoot(), state = null; + + for (; node && node !== root; node = node.parentNode) { + state = this.getContentEditable(node); + + if (state !== null) { + break; + } + } + + return state; + }, + + /** + * Destroys all internal references to the DOM to solve IE leak issues. + * + * @method destroy + */ + destroy: function() { + var self = this; + + // Unbind all events bound to window/document by editor instance + if (self.boundEvents) { + var i = self.boundEvents.length; + + while (i--) { + var item = self.boundEvents[i]; + this.events.unbind(item[0], item[1], item[2]); + } + + self.boundEvents = null; + } + + // Restore sizzle document to window.document + // Since the current document might be removed producing "Permission denied" on IE see #6325 + if (Sizzle.setDocument) { + Sizzle.setDocument(); + } + + self.win = self.doc = self.root = self.events = self.frag = null; + }, + + isChildOf: function(node, parent) { + while (node) { + if (parent === node) { + return true; + } + + node = node.parentNode; + } + + return false; + }, + + // #ifdef debug + + dumpRng: function(r) { + return ( + 'startContainer: ' + r.startContainer.nodeName + + ', startOffset: ' + r.startOffset + + ', endContainer: ' + r.endContainer.nodeName + + ', endOffset: ' + r.endOffset + ); + }, + + // #endif + + _findSib: function(node, selector, name) { + var self = this, func = selector; + + if (node) { + // If expression make a function of it using is + if (typeof func == 'string') { + func = function(node) { + return self.is(node, selector); + }; + } + + // Loop all siblings + for (node = node[name]; node; node = node[name]) { + if (func(node)) { + return node; + } + } + } + + return null; + } + }; + + /** + * Instance of DOMUtils for the current document. + * + * @static + * @property DOM + * @type tinymce.dom.DOMUtils + * @example + * // Example of how to add a class to some element by id + * tinymce.DOM.addClass('someid', 'someclass'); + */ + DOMUtils.DOM = new DOMUtils(document); + + return DOMUtils; +});