- *
- *
- *
- *
- * ```
- */
- findParent:function (node, filterFn, includeSelf) {
- if (node && !domUtils.isBody(node)) {
- node = includeSelf ? node : node.parentNode;
- while (node) {
- if (!filterFn || filterFn(node) || domUtils.isBody(node)) {
- return filterFn && !filterFn(node) && domUtils.isBody(node) ? null : node;
+ node = nodeB;
+ while (node = node.parentNode) {
+ // 如果nodeA是nodeB的祖先节点
+ if (node === nodeA) {
+ // domUtils.POSITION_CONTAINS + domUtils.POSITION_PRECEDING
+ return 20;
}
- node = node.parentNode;
+ parentsB.push(node);
}
- }
- return null;
- },
- /**
- * 查找node的节点名为tagName的第一个祖先节点， 查找的起点是node节点的父节点。
- * @method findParentByTagName
- * @param { Node } node 需要查找的节点对象
- * @param { Array } tagNames 需要查找的父节点的名称数组
- * @warning 查找的终点是到body节点为止
- * @return { Node | NULL } 如果找到符合条件的节点， 则返回该节点， 否则返回NULL
- * @example
- * ```javascript
- * var node = UE.dom.domUtils.findParentByTagName( document.getElementsByTagName("div")[0], [ "BODY" ] );
- * //output: BODY
- * console.log( node.tagName );
- * ```
- */
-
- /**
- * 查找node的节点名为tagName的祖先节点， 如果includeSelf的值为true，则查找的起点是给定的节点node，
- * 否则， 起点是node的父节点。
- * @method findParentByTagName
- * @param { Node } node 需要查找的节点对象
- * @param { Array } tagNames 需要查找的父节点的名称数组
- * @param { Boolean } includeSelf 查找过程是否包含node节点自身
- * @warning 查找的终点是到body节点为止
- * @return { Node | NULL } 如果找到符合条件的节点， 则返回该节点， 否则返回NULL
- * @example
- * ```javascript
- * var queryTarget = document.getElementsByTagName("div")[0];
- * var node = UE.dom.domUtils.findParentByTagName( queryTarget, [ "DIV" ], true );
- * //output: true
- * console.log( queryTarget === node );
- * ```
- */
- findParentByTagName:function (node, tagNames, includeSelf, excludeFn) {
- tagNames = utils.listToMap(utils.isArray(tagNames) ? tagNames : [tagNames]);
- return domUtils.findParent(node, function (node) {
- return tagNames[node.tagName] && !(excludeFn && excludeFn(node));
- }, includeSelf);
- },
- /**
- * 查找节点node的祖先节点集合， 查找的起点是给定节点的父节点，结果集中不包含给定的节点。
- * @method findParents
- * @param { Node } node 需要查找的节点对象
- * @return { Array } 给定节点的祖先节点数组
- * @grammar UE.dom.domUtils.findParents(node) => Array //返回一个祖先节点数组集合，不包含自身
- * @grammar UE.dom.domUtils.findParents(node,includeSelf) => Array //返回一个祖先节点数组集合，includeSelf指定是否包含自身
- * @grammar UE.dom.domUtils.findParents(node,includeSelf,filterFn) => Array //返回一个祖先节点数组集合，filterFn指定过滤条件，返回true的node将被选取
- * @grammar UE.dom.domUtils.findParents(node,includeSelf,filterFn,closerFirst) => Array //返回一个祖先节点数组集合，closerFirst为true的话，node的直接父亲节点是数组的第0个
- */
-
- /**
- * 查找节点node的祖先节点集合， 如果includeSelf的值为true，
- * 则返回的结果集中允许出现当前给定的节点， 否则， 该节点不会出现在其结果集中。
- * @method findParents
- * @param { Node } node 需要查找的节点对象
- * @param { Boolean } includeSelf 查找的结果中是否允许包含当前查找的节点对象
- * @return { Array } 给定节点的祖先节点数组
- */
- findParents:function (node, includeSelf, filterFn, closerFirst) {
- var parents = includeSelf && ( filterFn && filterFn(node) || !filterFn ) ? [node] : [];
- while (node = domUtils.findParent(node, filterFn)) {
- parents.push(node);
- }
- return closerFirst ? parents : parents.reverse();
- },
-
- /**
- * 在节点node后面插入新节点newNode
- * @method insertAfter
- * @param { Node } node 目标节点
- * @param { Node } newNode 新插入的节点， 该节点将置于目标节点之后
- * @return { Node } 新插入的节点
- */
- insertAfter:function (node, newNode) {
- return node.nextSibling ? node.parentNode.insertBefore(newNode, node.nextSibling):
- node.parentNode.appendChild(newNode);
- },
-
- /**
- * 删除节点node及其下属的所有节点
- * @method remove
- * @param { Node } node 需要删除的节点对象
- * @return { Node } 返回刚删除的节点对象
- * @example
- * ```html
- *
- *
- *
- * ```
- */
-
- /**
- * 删除节点node，并根据keepChildren的值决定是否保留子节点
- * @method remove
- * @param { Node } node 需要删除的节点对象
- * @param { Boolean } keepChildren 是否需要保留子节点
- * @return { Node } 返回刚删除的节点对象
- * @example
- * ```html
- * 你好
- *
- *
- *
- * ```
- */
- remove:function (node, keepChildren) {
- var parent = node.parentNode,
- child;
- if (parent) {
- if (keepChildren && node.hasChildNodes()) {
- while (child = node.firstChild) {
- parent.insertBefore(child, node);
+ parentsA.reverse();
+ parentsB.reverse();
+ if (parentsA[0] !== parentsB[0]) {
+ // domUtils.POSITION_DISCONNECTED
+ return 1;
+ }
+ var i = -1;
+ while (i++, parentsA[i] === parentsB[i]) {
+ }
+ nodeA = parentsA[i];
+ nodeB = parentsB[i];
+ while (nodeA = nodeA.nextSibling) {
+ if (nodeA === nodeB) {
+ // domUtils.POSITION_PRECEDING
+ return 4
}
}
- parent.removeChild(node);
- }
- return node;
- },
+ // domUtils.POSITION_FOLLOWING
+ return 2;
+ },
- /**
- * 取得node节点的下一个兄弟节点， 如果该节点其后没有兄弟节点， 则递归查找其父节点之后的第一个兄弟节点，
- * 直到找到满足条件的节点或者递归到BODY节点之后才会结束。
- * @method getNextDomNode
- * @param { Node } node 需要获取其后的兄弟节点的节点对象
- * @return { Node | NULL } 如果找满足条件的节点， 则返回该节点， 否则返回NULL
- * @example
- * ```html
- *
- * 你好
- *
- *
- *
- * xxx
- *
- *
- * ```
- * @example
- * ```html
- *
- *
- *
- * xxx
- *
- * xxx
- *
- *
- * ```
- */
+ /**
+ * 检测节点node在父节点中的索引位置
+ * @method getNodeIndex
+ * @param { Node } node 需要检测的节点对象
+ * @return { Number } 该节点在父节点中的位置
+ * @see UE.dom.domUtils.getNodeIndex(Node,Boolean)
+ */
- /**
- * 取得node节点的下一个兄弟节点， 如果startFromChild的值为ture，则先获取其子节点，
- * 如果有子节点则直接返回第一个子节点；如果没有子节点或者startFromChild的值为false，
- * 则执行getNextDomNode(Node node)的查找过程。
- * @method getNextDomNode
- * @param { Node } node 需要获取其后的兄弟节点的节点对象
- * @param { Boolean } startFromChild 查找过程是否从其子节点开始
- * @return { Node | NULL } 如果找满足条件的节点， 则返回该节点， 否则返回NULL
- * @see UE.dom.domUtils.getNextDomNode(Node)
- */
- getNextDomNode:function (node, startFromChild, filterFn, guard) {
- return getDomNode(node, 'firstChild', 'nextSibling', startFromChild, filterFn, guard);
- },
- getPreDomNode:function (node, startFromChild, filterFn, guard) {
- return getDomNode(node, 'lastChild', 'previousSibling', startFromChild, filterFn, guard);
- },
- /**
- * 检测节点node是否属是UEditor定义的bookmark节点
- * @method isBookmarkNode
- * @private
- * @param { Node } node 需要检测的节点对象
- * @return { Boolean } 是否是bookmark节点
- * @example
- * ```html
- *
- *
- * ```
- */
- isBookmarkNode:function (node) {
- return node.nodeType == 1 && node.id && /^_baidu_bookmark_/i.test(node.id);
- },
- /**
- * 获取节点node所属的window对象
- * @method getWindow
- * @param { Node } node 节点对象
- * @return { Window } 当前节点所属的window对象
- * @example
- * ```javascript
- * //output: true
- * console.log( UE.dom.domUtils.getWindow( document.body ) === window );
- * ```
- */
- getWindow:function (node) {
- var doc = node.ownerDocument || node;
- return doc.defaultView || doc.parentWindow;
- },
- /**
- * 获取离nodeA与nodeB最近的公共的祖先节点
- * @method getCommonAncestor
- * @param { Node } nodeA 第一个节点
- * @param { Node } nodeB 第二个节点
- * @remind 如果给定的两个节点是同一个节点， 将直接返回该节点。
- * @return { Node | NULL } 如果未找到公共节点， 返回NULL， 否则返回最近的公共祖先节点。
- * @example
- * ```javascript
- * var commonAncestor = UE.dom.domUtils.getCommonAncestor( document.body, document.body.firstChild );
- * //output: true
- * console.log( commonAncestor.tagName.toLowerCase() === 'body' );
- * ```
- */
- getCommonAncestor:function (nodeA, nodeB) {
- if (nodeA === nodeB)
- return nodeA;
- var parentsA = [nodeA] , parentsB = [nodeB], parent = nodeA, i = -1;
- while (parent = parent.parentNode) {
- if (parent === nodeB) {
- return parent;
- }
- parentsA.push(parent);
- }
- parent = nodeB;
- while (parent = parent.parentNode) {
- if (parent === nodeA)
- return parent;
- parentsB.push(parent);
- }
- parentsA.reverse();
- parentsB.reverse();
- while (i++, parentsA[i] === parentsB[i]) {
- }
- return i == 0 ? null : parentsA[i - 1];
-
- },
- /**
- * 清除node节点左右连续为空的兄弟inline节点
- * @method clearEmptySibling
- * @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
- * 则这些兄弟节点将被删除
- * @grammar UE.dom.domUtils.clearEmptySibling(node,ignoreNext) //ignoreNext指定是否忽略右边空节点
- * @grammar UE.dom.domUtils.clearEmptySibling(node,ignoreNext,ignorePre) //ignorePre指定是否忽略左边空节点
- * @example
- * ```html
- *
- *
- *
- *
- *
- * xxx
- *
- *
- *
- * ```
- */
-
- /**
- * 清除node节点左右连续为空的兄弟inline节点， 如果ignoreNext的值为true，
- * 则忽略对右边兄弟节点的操作。
- * @method clearEmptySibling
- * @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
- * @param { Boolean } ignoreNext 是否忽略忽略对右边的兄弟节点的操作
- * 则这些兄弟节点将被删除
- * @see UE.dom.domUtils.clearEmptySibling(Node)
- */
-
- /**
- * 清除node节点左右连续为空的兄弟inline节点， 如果ignoreNext的值为true，
- * 则忽略对右边兄弟节点的操作， 如果ignorePre的值为true，则忽略对左边兄弟节点的操作。
- * @method clearEmptySibling
- * @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
- * @param { Boolean } ignoreNext 是否忽略忽略对右边的兄弟节点的操作
- * @param { Boolean } ignorePre 是否忽略忽略对左边的兄弟节点的操作
- * 则这些兄弟节点将被删除
- * @see UE.dom.domUtils.clearEmptySibling(Node)
- */
- clearEmptySibling:function (node, ignoreNext, ignorePre) {
- function clear(next, dir) {
- var tmpNode;
- while (next && !domUtils.isBookmarkNode(next) && (domUtils.isEmptyInlineElement(next)
- //这里不能把空格算进来会吧空格干掉，出现文字间的空格丢掉了
- || !new RegExp('[^\t\n\r' + domUtils.fillChar + ']').test(next.nodeValue) )) {
- tmpNode = next[dir];
- domUtils.remove(next);
- next = tmpNode;
- }
- }
- !ignoreNext && clear(node.nextSibling, 'nextSibling');
- !ignorePre && clear(node.previousSibling, 'previousSibling');
- },
- /**
- * 将一个文本节点textNode拆分成两个文本节点，offset指定拆分位置
- * @method split
- * @param { Node } textNode 需要拆分的文本节点对象
- * @param { int } offset 需要拆分的位置， 位置计算从0开始
- * @return { Node } 拆分后形成的新节点
- * @example
- * ```html
- * abcdef
- *
- * ```
- */
- split:function (node, offset) {
- var doc = node.ownerDocument;
- if (browser.ie && offset == node.nodeValue.length) {
- var next = doc.createTextNode('');
- return domUtils.insertAfter(node, next);
- }
- var retval = node.splitText(offset);
- //ie8下splitText不会跟新childNodes,我们手动触发他的更新
- if (browser.ie8) {
- var tmpNode = doc.createTextNode('');
- domUtils.insertAfter(retval, tmpNode);
- domUtils.remove(tmpNode);
- }
- return retval;
- },
-
- /**
- * 检测文本节点textNode是否为空节点（包括空格、换行、占位符等字符）
- * @method isWhitespace
- * @param { Node } node 需要检测的节点对象
- * @return { Boolean } 检测的节点是否为空
- * @example
- * ```html
- *
- *
- *
- *
- * ```
- */
- isWhitespace:function (node) {
- return !new RegExp('[^ \t\n\r' + domUtils.fillChar + ']').test(node.nodeValue);
- },
- /**
- * 获取元素element相对于viewport的位置坐标
- * @method getXY
- * @param { Node } element 需要计算位置的节点对象
- * @return { Object } 返回形如{x:left,y:top}的一个key-value映射对象， 其中键x代表水平偏移距离，
- * y代表垂直偏移距离。
- *
- * @example
- * ```javascript
- * var location = UE.dom.domUtils.getXY( document.getElementById("test") );
- * //output: test的坐标为: 12, 24
- * console.log( 'test的坐标为： ', location.x, ',', location.y );
- * ```
- */
- getXY:function (element) {
- var x = 0, y = 0;
- while (element.offsetParent) {
- y += element.offsetTop;
- x += element.offsetLeft;
- element = element.offsetParent;
- }
- return { 'x':x, 'y':y};
- },
- /**
- * 为元素element绑定原生DOM事件，type为事件类型，handler为处理函数
- * @method on
- * @param { Node } element 需要绑定事件的节点对象
- * @param { String } type 绑定的事件类型
- * @param { Function } handler 事件处理器
- * @example
- * ```javascript
- * UE.dom.domUtils.on(document.body,"click",function(e){
- * //e为事件对象，this为被点击元素对戏那个
- * });
- * ```
- */
-
- /**
- * 为元素element绑定原生DOM事件，type为事件类型，handler为处理函数
- * @method on
- * @param { Node } element 需要绑定事件的节点对象
- * @param { Array } type 绑定的事件类型数组
- * @param { Function } handler 事件处理器
- * @example
- * ```javascript
- * UE.dom.domUtils.on(document.body,["click","mousedown"],function(evt){
- * //evt为事件对象，this为被点击元素对象
- * });
- * ```
- */
- on:function (element, type, handler) {
-
- var types = utils.isArray(type) ? type : utils.trim(type).split(/\s+/),
- k = types.length;
- if (k) while (k--) {
- type = types[k];
- if (element.addEventListener) {
- element.addEventListener(type, handler, false);
- } else {
- if (!handler._d) {
- handler._d = {
- els : []
- };
- }
- var key = type + handler.toString(),index = utils.indexOf(handler._d.els,element);
- if (!handler._d[key] || index == -1) {
- if(index == -1){
- handler._d.els.push(element);
+ /**
+ * 检测节点node在父节点中的索引位置， 根据给定的mergeTextNode参数决定是否要合并多个连续的文本节点为一个节点
+ * @method getNodeIndex
+ * @param { Node } node 需要检测的节点对象
+ * @param { Boolean } mergeTextNode 是否合并多个连续的文本节点为一个节点
+ * @return { Number } 该节点在父节点中的位置
+ * @example
+ * ```javascript
+ *
+ * var node = document.createElement("div");
+ *
+ * node.appendChild( document.createTextNode( "hello" ) );
+ * node.appendChild( document.createTextNode( "world" ) );
+ * node.appendChild( node = document.createElement( "div" ) );
+ *
+ * //output: 2
+ * console.log( UE.dom.domUtils.getNodeIndex( node ) );
+ *
+ * //output: 1
+ * console.log( UE.dom.domUtils.getNodeIndex( node, true ) );
+ *
+ * ```
+ */
+ getNodeIndex: function (node, ignoreTextNode) {
+ var preNode = node,
+ i = 0;
+ while (preNode = preNode.previousSibling) {
+ if (ignoreTextNode && preNode.nodeType == 3) {
+ if (preNode.nodeType != preNode.nextSibling.nodeType) {
+ i++;
}
- if(!handler._d[key]){
- handler._d[key] = function (evt) {
- return handler.call(evt.srcElement, evt || window.event);
+ continue;
+ }
+ i++;
+ }
+ return i;
+ },
+
+ /**
+ * 检测节点node是否在给定的document对象上
+ * @method inDoc
+ * @param { Node } node 需要检测的节点对象
+ * @param { DomDocument } doc 需要检测的document对象
+ * @return { Boolean } 该节点node是否在给定的document的dom树上
+ * @example
+ * ```javascript
+ *
+ * var node = document.createElement("div");
+ *
+ * //output: false
+ * console.log( UE.do.domUtils.inDoc( node, document ) );
+ *
+ * document.body.appendChild( node );
+ *
+ * //output: true
+ * console.log( UE.do.domUtils.inDoc( node, document ) );
+ *
+ * ```
+ */
+ inDoc: function (node, doc) {
+ return domUtils.getPosition(node, doc) == 10;
+ },
+ /**
+ * 根据给定的过滤规则filterFn， 查找符合该过滤规则的node节点的第一个祖先节点，
+ * 查找的起点是给定node节点的父节点。
+ * @method findParent
+ * @param { Node } node 需要查找的节点
+ * @param { Function } filterFn 自定义的过滤方法。
+ * @warning 查找的终点是到body节点为止
+ * @remind 自定义的过滤方法filterFn接受一个Node对象作为参数， 该对象代表当前执行检测的祖先节点。 如果该
+ * 节点满足过滤条件， 则要求返回true， 这时将直接返回该节点作为findParent()的结果， 否则， 请返回false。
+ * @return { Node | Null } 如果找到符合过滤条件的节点， 就返回该节点， 否则返回NULL
+ * @example
+ * ```javascript
+ * var filterNode = UE.dom.domUtils.findParent( document.body.firstChild, function ( node ) {
+ *
+ * //由于查找的终点是body节点， 所以永远也不会匹配当前过滤器的条件， 即这里永远会返回false
+ * return node.tagName === "HTML";
+ *
+ * } );
+ *
+ * //output: true
+ * console.log( filterNode === null );
+ * ```
+ */
+
+ /**
+ * 根据给定的过滤规则filterFn， 查找符合该过滤规则的node节点的第一个祖先节点，
+ * 如果includeSelf的值为true，则查找的起点是给定的节点node， 否则， 起点是node的父节点
+ * @method findParent
+ * @param { Node } node 需要查找的节点
+ * @param { Function } filterFn 自定义的过滤方法。
+ * @param { Boolean } includeSelf 查找过程是否包含自身
+ * @warning 查找的终点是到body节点为止
+ * @remind 自定义的过滤方法filterFn接受一个Node对象作为参数， 该对象代表当前执行检测的祖先节点。 如果该
+ * 节点满足过滤条件， 则要求返回true， 这时将直接返回该节点作为findParent()的结果， 否则， 请返回false。
+ * @remind 如果includeSelf为true， 则过滤器第一次执行时的参数会是节点本身。
+ * 反之， 过滤器第一次执行时的参数将是该节点的父节点。
+ * @return { Node | Null } 如果找到符合过滤条件的节点， 就返回该节点， 否则返回NULL
+ * @example
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ```
+ */
+ findParent: function (node, filterFn, includeSelf) {
+ if (node && !domUtils.isBody(node)) {
+ node = includeSelf ? node : node.parentNode;
+ while (node) {
+ if (!filterFn || filterFn(node) || domUtils.isBody(node)) {
+ return filterFn && !filterFn(node) && domUtils.isBody(node) ? null : node;
+ }
+ node = node.parentNode;
+ }
+ }
+ return null;
+ },
+ /**
+ * 查找node的节点名为tagName的第一个祖先节点， 查找的起点是node节点的父节点。
+ * @method findParentByTagName
+ * @param { Node } node 需要查找的节点对象
+ * @param { Array } tagNames 需要查找的父节点的名称数组
+ * @warning 查找的终点是到body节点为止
+ * @return { Node | NULL } 如果找到符合条件的节点， 则返回该节点， 否则返回NULL
+ * @example
+ * ```javascript
+ * var node = UE.dom.domUtils.findParentByTagName( document.getElementsByTagName("div")[0], [ "BODY" ] );
+ * //output: BODY
+ * console.log( node.tagName );
+ * ```
+ */
+
+ /**
+ * 查找node的节点名为tagName的祖先节点， 如果includeSelf的值为true，则查找的起点是给定的节点node，
+ * 否则， 起点是node的父节点。
+ * @method findParentByTagName
+ * @param { Node } node 需要查找的节点对象
+ * @param { Array } tagNames 需要查找的父节点的名称数组
+ * @param { Boolean } includeSelf 查找过程是否包含node节点自身
+ * @warning 查找的终点是到body节点为止
+ * @return { Node | NULL } 如果找到符合条件的节点， 则返回该节点， 否则返回NULL
+ * @example
+ * ```javascript
+ * var queryTarget = document.getElementsByTagName("div")[0];
+ * var node = UE.dom.domUtils.findParentByTagName( queryTarget, [ "DIV" ], true );
+ * //output: true
+ * console.log( queryTarget === node );
+ * ```
+ */
+ findParentByTagName: function (node, tagNames, includeSelf, excludeFn) {
+ tagNames = utils.listToMap(utils.isArray(tagNames) ? tagNames : [tagNames]);
+ return domUtils.findParent(node, function (node) {
+ return tagNames[node.tagName] && !(excludeFn && excludeFn(node));
+ }, includeSelf);
+ },
+ /**
+ * 查找节点node的祖先节点集合， 查找的起点是给定节点的父节点，结果集中不包含给定的节点。
+ * @method findParents
+ * @param { Node } node 需要查找的节点对象
+ * @return { Array } 给定节点的祖先节点数组
+ * @grammar UE.dom.domUtils.findParents(node) => Array //返回一个祖先节点数组集合，不包含自身
+ * @grammar UE.dom.domUtils.findParents(node,includeSelf) => Array //返回一个祖先节点数组集合，includeSelf指定是否包含自身
+ * @grammar UE.dom.domUtils.findParents(node,includeSelf,filterFn) => Array //返回一个祖先节点数组集合，filterFn指定过滤条件，返回true的node将被选取
+ * @grammar UE.dom.domUtils.findParents(node,includeSelf,filterFn,closerFirst) => Array //返回一个祖先节点数组集合，closerFirst为true的话，node的直接父亲节点是数组的第0个
+ */
+
+ /**
+ * 查找节点node的祖先节点集合， 如果includeSelf的值为true，
+ * 则返回的结果集中允许出现当前给定的节点， 否则， 该节点不会出现在其结果集中。
+ * @method findParents
+ * @param { Node } node 需要查找的节点对象
+ * @param { Boolean } includeSelf 查找的结果中是否允许包含当前查找的节点对象
+ * @return { Array } 给定节点的祖先节点数组
+ */
+ findParents: function (node, includeSelf, filterFn, closerFirst) {
+ var parents = includeSelf && (filterFn && filterFn(node) || !filterFn) ? [node] : [];
+ while (node = domUtils.findParent(node, filterFn)) {
+ parents.push(node);
+ }
+ return closerFirst ? parents : parents.reverse();
+ },
+
+ /**
+ * 在节点node后面插入新节点newNode
+ * @method insertAfter
+ * @param { Node } node 目标节点
+ * @param { Node } newNode 新插入的节点， 该节点将置于目标节点之后
+ * @return { Node } 新插入的节点
+ */
+ insertAfter: function (node, newNode) {
+ return node.nextSibling ? node.parentNode.insertBefore(newNode, node.nextSibling) :
+ node.parentNode.appendChild(newNode);
+ },
+
+ /**
+ * 删除节点node及其下属的所有节点
+ * @method remove
+ * @param { Node } node 需要删除的节点对象
+ * @return { Node } 返回刚删除的节点对象
+ * @example
+ * ```html
+ *
+ *
+ *
+ * ```
+ */
+
+ /**
+ * 删除节点node，并根据keepChildren的值决定是否保留子节点
+ * @method remove
+ * @param { Node } node 需要删除的节点对象
+ * @param { Boolean } keepChildren 是否需要保留子节点
+ * @return { Node } 返回刚删除的节点对象
+ * @example
+ * ```html
+ * 你好
+ *
+ *
+ *
+ * ```
+ */
+ remove: function (node, keepChildren) {
+ var parent = node.parentNode,
+ child;
+ if (parent) {
+ if (keepChildren && node.hasChildNodes()) {
+ while (child = node.firstChild) {
+ parent.insertBefore(child, node);
+ }
+ }
+ parent.removeChild(node);
+ }
+ return node;
+ },
+
+ /**
+ * 取得node节点的下一个兄弟节点， 如果该节点其后没有兄弟节点， 则递归查找其父节点之后的第一个兄弟节点，
+ * 直到找到满足条件的节点或者递归到BODY节点之后才会结束。
+ * @method getNextDomNode
+ * @param { Node } node 需要获取其后的兄弟节点的节点对象
+ * @return { Node | NULL } 如果找满足条件的节点， 则返回该节点， 否则返回NULL
+ * @example
+ * ```html
+ *
+ * 你好
+ *
+ *
+ *
+ * xxx
+ *
+ *
+ * ```
+ * @example
+ * ```html
+ *
+ *
+ *
+ * xxx
+ *
+ * xxx
+ *
+ *
+ * ```
+ */
+
+ /**
+ * 取得node节点的下一个兄弟节点， 如果startFromChild的值为ture，则先获取其子节点，
+ * 如果有子节点则直接返回第一个子节点；如果没有子节点或者startFromChild的值为false，
+ * 则执行getNextDomNode(Node node)的查找过程。
+ * @method getNextDomNode
+ * @param { Node } node 需要获取其后的兄弟节点的节点对象
+ * @param { Boolean } startFromChild 查找过程是否从其子节点开始
+ * @return { Node | NULL } 如果找满足条件的节点， 则返回该节点， 否则返回NULL
+ * @see UE.dom.domUtils.getNextDomNode(Node)
+ */
+ getNextDomNode: function (node, startFromChild, filterFn, guard) {
+ return getDomNode(node, 'firstChild', 'nextSibling', startFromChild, filterFn, guard);
+ },
+ getPreDomNode: function (node, startFromChild, filterFn, guard) {
+ return getDomNode(node, 'lastChild', 'previousSibling', startFromChild, filterFn, guard);
+ },
+ /**
+ * 检测节点node是否属是UEditor定义的bookmark节点
+ * @method isBookmarkNode
+ * @private
+ * @param { Node } node 需要检测的节点对象
+ * @return { Boolean } 是否是bookmark节点
+ * @example
+ * ```html
+ *
+ *
+ * ```
+ */
+ isBookmarkNode: function (node) {
+ return node.nodeType == 1 && node.id && /^_baidu_bookmark_/i.test(node.id);
+ },
+ /**
+ * 获取节点node所属的window对象
+ * @method getWindow
+ * @param { Node } node 节点对象
+ * @return { Window } 当前节点所属的window对象
+ * @example
+ * ```javascript
+ * //output: true
+ * console.log( UE.dom.domUtils.getWindow( document.body ) === window );
+ * ```
+ */
+ getWindow: function (node) {
+ var doc = node.ownerDocument || node;
+ return doc.defaultView || doc.parentWindow;
+ },
+ /**
+ * 获取离nodeA与nodeB最近的公共的祖先节点
+ * @method getCommonAncestor
+ * @param { Node } nodeA 第一个节点
+ * @param { Node } nodeB 第二个节点
+ * @remind 如果给定的两个节点是同一个节点， 将直接返回该节点。
+ * @return { Node | NULL } 如果未找到公共节点， 返回NULL， 否则返回最近的公共祖先节点。
+ * @example
+ * ```javascript
+ * var commonAncestor = UE.dom.domUtils.getCommonAncestor( document.body, document.body.firstChild );
+ * //output: true
+ * console.log( commonAncestor.tagName.toLowerCase() === 'body' );
+ * ```
+ */
+ getCommonAncestor: function (nodeA, nodeB) {
+ if (nodeA === nodeB)
+ return nodeA;
+ var parentsA = [nodeA], parentsB = [nodeB], parent = nodeA, i = -1;
+ while (parent = parent.parentNode) {
+ if (parent === nodeB) {
+ return parent;
+ }
+ parentsA.push(parent);
+ }
+ parent = nodeB;
+ while (parent = parent.parentNode) {
+ if (parent === nodeA)
+ return parent;
+ parentsB.push(parent);
+ }
+ parentsA.reverse();
+ parentsB.reverse();
+ while (i++, parentsA[i] === parentsB[i]) {
+ }
+ return i == 0 ? null : parentsA[i - 1];
+
+ },
+ /**
+ * 清除node节点左右连续为空的兄弟inline节点
+ * @method clearEmptySibling
+ * @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
+ * 则这些兄弟节点将被删除
+ * @grammar UE.dom.domUtils.clearEmptySibling(node,ignoreNext) //ignoreNext指定是否忽略右边空节点
+ * @grammar UE.dom.domUtils.clearEmptySibling(node,ignoreNext,ignorePre) //ignorePre指定是否忽略左边空节点
+ * @example
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ * xxx
+ *
+ *
+ *
+ * ```
+ */
+
+ /**
+ * 清除node节点左右连续为空的兄弟inline节点， 如果ignoreNext的值为true，
+ * 则忽略对右边兄弟节点的操作。
+ * @method clearEmptySibling
+ * @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
+ * @param { Boolean } ignoreNext 是否忽略忽略对右边的兄弟节点的操作
+ * 则这些兄弟节点将被删除
+ * @see UE.dom.domUtils.clearEmptySibling(Node)
+ */
+
+ /**
+ * 清除node节点左右连续为空的兄弟inline节点， 如果ignoreNext的值为true，
+ * 则忽略对右边兄弟节点的操作， 如果ignorePre的值为true，则忽略对左边兄弟节点的操作。
+ * @method clearEmptySibling
+ * @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
+ * @param { Boolean } ignoreNext 是否忽略忽略对右边的兄弟节点的操作
+ * @param { Boolean } ignorePre 是否忽略忽略对左边的兄弟节点的操作
+ * 则这些兄弟节点将被删除
+ * @see UE.dom.domUtils.clearEmptySibling(Node)
+ */
+ clearEmptySibling: function (node, ignoreNext, ignorePre) {
+ function clear(next, dir) {
+ var tmpNode;
+ while (next && !domUtils.isBookmarkNode(next) && (domUtils.isEmptyInlineElement(next)
+ //这里不能把空格算进来会吧空格干掉，出现文字间的空格丢掉了
+ || !new RegExp('[^\t\n\r' + domUtils.fillChar + ']').test(next.nodeValue))) {
+ tmpNode = next[dir];
+ domUtils.remove(next);
+ next = tmpNode;
+ }
+ }
+
+ !ignoreNext && clear(node.nextSibling, 'nextSibling');
+ !ignorePre && clear(node.previousSibling, 'previousSibling');
+ },
+ /**
+ * 将一个文本节点textNode拆分成两个文本节点，offset指定拆分位置
+ * @method split
+ * @param { Node } textNode 需要拆分的文本节点对象
+ * @param { int } offset 需要拆分的位置， 位置计算从0开始
+ * @return { Node } 拆分后形成的新节点
+ * @example
+ * ```html
+ * abcdef
+ *
+ * ```
+ */
+ split: function (node, offset) {
+ var doc = node.ownerDocument;
+ if (browser.ie && offset == node.nodeValue.length) {
+ var next = doc.createTextNode('');
+ return domUtils.insertAfter(node, next);
+ }
+ var retval = node.splitText(offset);
+ //ie8下splitText不会跟新childNodes,我们手动触发他的更新
+ if (browser.ie8) {
+ var tmpNode = doc.createTextNode('');
+ domUtils.insertAfter(retval, tmpNode);
+ domUtils.remove(tmpNode);
+ }
+ return retval;
+ },
+
+ /**
+ * 检测文本节点textNode是否为空节点（包括空格、换行、占位符等字符）
+ * @method isWhitespace
+ * @param { Node } node 需要检测的节点对象
+ * @return { Boolean } 检测的节点是否为空
+ * @example
+ * ```html
+ *
+ *
+ *
+ *
+ * ```
+ */
+ isWhitespace: function (node) {
+ return !new RegExp('[^ \t\n\r' + domUtils.fillChar + ']').test(node.nodeValue);
+ },
+ /**
+ * 获取元素element相对于viewport的位置坐标
+ * @method getXY
+ * @param { Node } element 需要计算位置的节点对象
+ * @return { Object } 返回形如{x:left,y:top}的一个key-value映射对象， 其中键x代表水平偏移距离，
+ * y代表垂直偏移距离。
+ *
+ * @example
+ * ```javascript
+ * var location = UE.dom.domUtils.getXY( document.getElementById("test") );
+ * //output: test的坐标为: 12, 24
+ * console.log( 'test的坐标为： ', location.x, ',', location.y );
+ * ```
+ */
+ getXY: function (element) {
+ var x = 0, y = 0;
+ while (element.offsetParent) {
+ y += element.offsetTop;
+ x += element.offsetLeft;
+ element = element.offsetParent;
+ }
+ return {'x': x, 'y': y};
+ },
+ /**
+ * 为元素element绑定原生DOM事件，type为事件类型，handler为处理函数
+ * @method on
+ * @param { Node } element 需要绑定事件的节点对象
+ * @param { String } type 绑定的事件类型
+ * @param { Function } handler 事件处理器
+ * @example
+ * ```javascript
+ * UE.dom.domUtils.on(document.body,"click",function(e){
+ * //e为事件对象，this为被点击元素对戏那个
+ * });
+ * ```
+ */
+
+ /**
+ * 为元素element绑定原生DOM事件，type为事件类型，handler为处理函数
+ * @method on
+ * @param { Node } element 需要绑定事件的节点对象
+ * @param { Array } type 绑定的事件类型数组
+ * @param { Function } handler 事件处理器
+ * @example
+ * ```javascript
+ * UE.dom.domUtils.on(document.body,["click","mousedown"],function(evt){
+ * //evt为事件对象，this为被点击元素对象
+ * });
+ * ```
+ */
+ on: function (element, type, handler) {
+
+ var types = utils.isArray(type) ? type : utils.trim(type).split(/\s+/),
+ k = types.length;
+ if (k) while (k--) {
+ type = types[k];
+ if (element.addEventListener) {
+ element.addEventListener(type, handler, false);
+ } else {
+ if (!handler._d) {
+ handler._d = {
+ els: []
};
}
+ var key = type + handler.toString(), index = utils.indexOf(handler._d.els, element);
+ if (!handler._d[key] || index == -1) {
+ if (index == -1) {
+ handler._d.els.push(element);
+ }
+ if (!handler._d[key]) {
+ handler._d[key] = function (evt) {
+ return handler.call(evt.srcElement, evt || window.event);
+ };
+ }
- element.attachEvent('on' + type, handler._d[key]);
- }
- }
- }
- element = null;
- },
- /**
- * 解除DOM事件绑定
- * @method un
- * @param { Node } element 需要解除事件绑定的节点对象
- * @param { String } type 需要接触绑定的事件类型
- * @param { Function } handler 对应的事件处理器
- * @example
- * ```javascript
- * UE.dom.domUtils.un(document.body,"click",function(evt){
- * //evt为事件对象，this为被点击元素对象
- * });
- * ```
- */
-
- /**
- * 解除DOM事件绑定
- * @method un
- * @param { Node } element 需要解除事件绑定的节点对象
- * @param { Array } type 需要接触绑定的事件类型数组
- * @param { Function } handler 对应的事件处理器
- * @example
- * ```javascript
- * UE.dom.domUtils.un(document.body, ["click","mousedown"],function(evt){
- * //evt为事件对象，this为被点击元素对象
- * });
- * ```
- */
- un:function (element, type, handler) {
- var types = utils.isArray(type) ? type : utils.trim(type).split(/\s+/),
- k = types.length;
- if (k) while (k--) {
- type = types[k];
- if (element.removeEventListener) {
- element.removeEventListener(type, handler, false);
- } else {
- var key = type + handler.toString();
- try{
- element.detachEvent('on' + type, handler._d ? handler._d[key] : handler);
- }catch(e){}
- if (handler._d && handler._d[key]) {
- var index = utils.indexOf(handler._d.els,element);
- if(index!=-1){
- handler._d.els.splice(index,1);
+ element.attachEvent('on' + type, handler._d[key]);
}
- handler._d.els.length == 0 && delete handler._d[key];
}
}
- }
- },
+ element = null;
+ },
+ /**
+ * 解除DOM事件绑定
+ * @method un
+ * @param { Node } element 需要解除事件绑定的节点对象
+ * @param { String } type 需要接触绑定的事件类型
+ * @param { Function } handler 对应的事件处理器
+ * @example
+ * ```javascript
+ * UE.dom.domUtils.un(document.body,"click",function(evt){
+ * //evt为事件对象，this为被点击元素对象
+ * });
+ * ```
+ */
- /**
- * 比较节点nodeA与节点nodeB是否具有相同的标签名、属性名以及属性值
- * @method isSameElement
- * @param { Node } nodeA 需要比较的节点
- * @param { Node } nodeB 需要比较的节点
- * @return { Boolean } 两个节点是否具有相同的标签名、属性名以及属性值
- * @example
- * ```html
- * ssss
- * bbbbb
- * ssss
- * bbbbb
- *
- *
- * ```
- */
- isSameElement:function (nodeA, nodeB) {
- if (nodeA.tagName != nodeB.tagName) {
- return false;
- }
- var thisAttrs = nodeA.attributes,
- otherAttrs = nodeB.attributes;
- if (!ie && thisAttrs.length != otherAttrs.length) {
- return false;
- }
- var attrA, attrB, al = 0, bl = 0;
- for (var i = 0; attrA = thisAttrs[i++];) {
- if (attrA.nodeName == 'style') {
- if (attrA.specified) {
- al++;
- }
- if (domUtils.isSameStyle(nodeA, nodeB)) {
- continue;
+ /**
+ * 解除DOM事件绑定
+ * @method un
+ * @param { Node } element 需要解除事件绑定的节点对象
+ * @param { Array } type 需要接触绑定的事件类型数组
+ * @param { Function } handler 对应的事件处理器
+ * @example
+ * ```javascript
+ * UE.dom.domUtils.un(document.body, ["click","mousedown"],function(evt){
+ * //evt为事件对象，this为被点击元素对象
+ * });
+ * ```
+ */
+ un: function (element, type, handler) {
+ var types = utils.isArray(type) ? type : utils.trim(type).split(/\s+/),
+ k = types.length;
+ if (k) while (k--) {
+ type = types[k];
+ if (element.removeEventListener) {
+ element.removeEventListener(type, handler, false);
} else {
+ var key = type + handler.toString();
+ try {
+ element.detachEvent('on' + type, handler._d ? handler._d[key] : handler);
+ } catch (e) {
+ }
+ if (handler._d && handler._d[key]) {
+ var index = utils.indexOf(handler._d.els, element);
+ if (index != -1) {
+ handler._d.els.splice(index, 1);
+ }
+ handler._d.els.length == 0 && delete handler._d[key];
+ }
+ }
+ }
+ },
+
+ /**
+ * 比较节点nodeA与节点nodeB是否具有相同的标签名、属性名以及属性值
+ * @method isSameElement
+ * @param { Node } nodeA 需要比较的节点
+ * @param { Node } nodeB 需要比较的节点
+ * @return { Boolean } 两个节点是否具有相同的标签名、属性名以及属性值
+ * @example
+ * ```html
+ * ssss
+ * bbbbb
+ * ssss
+ * bbbbb
+ *
+ *
+ * ```
+ */
+ isSameElement: function (nodeA, nodeB) {
+ if (nodeA.tagName != nodeB.tagName) {
+ return false;
+ }
+ var thisAttrs = nodeA.attributes,
+ otherAttrs = nodeB.attributes;
+ if (!ie && thisAttrs.length != otherAttrs.length) {
+ return false;
+ }
+ var attrA, attrB, al = 0, bl = 0;
+ for (var i = 0; attrA = thisAttrs[i++];) {
+ if (attrA.nodeName == 'style') {
+ if (attrA.specified) {
+ al++;
+ }
+ if (domUtils.isSameStyle(nodeA, nodeB)) {
+ continue;
+ } else {
+ return false;
+ }
+ }
+ if (ie) {
+ if (attrA.specified) {
+ al++;
+ attrB = otherAttrs.getNamedItem(attrA.nodeName);
+ } else {
+ continue;
+ }
+ } else {
+ attrB = nodeB.attributes[attrA.nodeName];
+ }
+ if (!attrB.specified || attrA.nodeValue != attrB.nodeValue) {
return false;
}
}
+ // 有可能attrB的属性包含了attrA的属性之外还有自己的属性
if (ie) {
- if (attrA.specified) {
- al++;
- attrB = otherAttrs.getNamedItem(attrA.nodeName);
- } else {
- continue;
+ for (i = 0; attrB = otherAttrs[i++];) {
+ if (attrB.specified) {
+ bl++;
+ }
}
- } else {
- attrB = nodeB.attributes[attrA.nodeName];
- }
- if (!attrB.specified || attrA.nodeValue != attrB.nodeValue) {
- return false;
- }
- }
- // 有可能attrB的属性包含了attrA的属性之外还有自己的属性
- if (ie) {
- for (i = 0; attrB = otherAttrs[i++];) {
- if (attrB.specified) {
- bl++;
- }
- }
- if (al != bl) {
- return false;
- }
- }
- return true;
- },
-
- /**
- * 判断节点nodeA与节点nodeB的元素的style属性是否一致
- * @method isSameStyle
- * @param { Node } nodeA 需要比较的节点
- * @param { Node } nodeB 需要比较的节点
- * @return { Boolean } 两个节点是否具有相同的style属性值
- * @example
- * ```html
- * ssss
- * bbbbb
- * ssss
- * bbbbb
- *
- *
- * ```
- */
- isSameStyle:function (nodeA, nodeB) {
- var styleA = nodeA.style.cssText.replace(/( ?; ?)/g, ';').replace(/( ?: ?)/g, ':'),
- styleB = nodeB.style.cssText.replace(/( ?; ?)/g, ';').replace(/( ?: ?)/g, ':');
- if (browser.opera) {
- styleA = nodeA.style;
- styleB = nodeB.style;
- if (styleA.length != styleB.length)
- return false;
- for (var p in styleA) {
- if (/^(\d+|csstext)$/i.test(p)) {
- continue;
- }
- if (styleA[p] != styleB[p]) {
+ if (al != bl) {
return false;
}
}
return true;
- }
- if (!styleA || !styleB) {
- return styleA == styleB;
- }
- styleA = styleA.split(';');
- styleB = styleB.split(';');
- if (styleA.length != styleB.length) {
- return false;
- }
- for (var i = 0, ci; ci = styleA[i++];) {
- if (utils.indexOf(styleB, ci) == -1) {
- return false;
- }
- }
- return true;
- },
- /**
- * 检查节点node是否为block元素
- * @method isBlockElm
- * @param { Node } node 需要检测的节点对象
- * @return { Boolean } 是否是block元素节点
- * @warning 该方法的判断规则如下： 如果该元素原本是block元素， 则不论该元素当前的css样式是什么都会返回true；
- * 否则，检测该元素的css样式， 如果该元素当前是block元素， 则返回true。 其余情况下都返回false。
- * @example
- * ```html
- *
- *
- *
- *
- *
- * ```
- */
- isBlockElm:function (node) {
- return node.nodeType == 1 && (dtd.$block[node.tagName] || styleBlock[domUtils.getComputedStyle(node, 'display')]) && !dtd.$nonChild[node.tagName];
- },
- /**
- * 检测node节点是否为body节点
- * @method isBody
- * @param { Element } node 需要检测的dom元素
- * @return { Boolean } 给定的元素是否是body元素
- * @example
- * ```javascript
- * //output: true
- * console.log( UE.dom.domUtils.isBody( document.body ) );
- * ```
- */
- isBody:function (node) {
- return node && node.nodeType == 1 && node.tagName.toLowerCase() == 'body';
- },
- /**
- * 以node节点为分界，将该节点的指定祖先节点parent拆分成两个独立的节点，
- * 拆分形成的两个节点之间是node节点
- * @method breakParent
- * @param { Node } node 作为分界的节点对象
- * @param { Node } parent 该节点必须是node节点的祖先节点， 且是block节点。
- * @return { Node } 给定的node分界节点
- * @example
- * ```javascript
- *
- * var node = document.createElement("span"),
- * wrapNode = document.createElement( "div" ),
- * parent = document.createElement("p");
- *
- * parent.appendChild( node );
- * wrapNode.appendChild( parent );
- *
- * //拆分前
- * //output: - * console.log( wrapNode.innerHTML ); - * - * - * UE.dom.domUtils.breakParent( node, parent ); - * //拆分后 - * //output: - * console.log( wrapNode.innerHTML ); - * - * ``` - */ - breakParent:function (node, parent) { - var tmpNode, - parentClone = node, - clone = node, - leftNodes, - rightNodes; - do { - parentClone = parentClone.parentNode; - if (leftNodes) { - tmpNode = parentClone.cloneNode(false); - tmpNode.appendChild(leftNodes); - leftNodes = tmpNode; - tmpNode = parentClone.cloneNode(false); - tmpNode.appendChild(rightNodes); - rightNodes = tmpNode; - } else { - leftNodes = parentClone.cloneNode(false); - rightNodes = leftNodes.cloneNode(false); - } - while (tmpNode = clone.previousSibling) { - leftNodes.insertBefore(tmpNode, leftNodes.firstChild); - } - while (tmpNode = clone.nextSibling) { - rightNodes.appendChild(tmpNode); - } - clone = parentClone; - } while (parent !== parentClone); - tmpNode = parent.parentNode; - tmpNode.insertBefore(leftNodes, parent); - tmpNode.insertBefore(rightNodes, parent); - tmpNode.insertBefore(node, rightNodes); - domUtils.remove(parent); - return node; - }, - /** - * 检查节点node是否是空inline节点 - * @method isEmptyInlineElement - * @param { Node } node 需要检测的节点对象 - * @return { Number } 如果给定的节点是空的inline节点， 则返回1, 否则返回0。 - * @example - * ```html - * => 1 - * => 1 - * => 1 - * xx => 0 - * ``` - */ - isEmptyInlineElement:function (node) { - if (node.nodeType != 1 || !dtd.$removeEmpty[ node.tagName ]) { - return 0; - } - node = node.firstChild; - while (node) { - //如果是创建的bookmark就跳过 - if (domUtils.isBookmarkNode(node)) { - return 0; - } - if (node.nodeType == 1 && !domUtils.isEmptyInlineElement(node) || - node.nodeType == 3 && !domUtils.isWhitespace(node) - ) { - return 0; - } - node = node.nextSibling; - } - return 1; + }, - }, - - /** - * 删除node节点下首尾两端的空白文本子节点 - * @method trimWhiteTextNode - * @param { Element } node 需要执行删除操作的元素对象 - * @example - * ```javascript - * var node = document.createElement("div"); - * - * node.appendChild( document.createTextNode( "" ) ); - * - * node.appendChild( document.createElement("div") ); - * - * node.appendChild( document.createTextNode( "" ) ); - * - * //3 - * console.log( node.childNodes.length ); - * - * UE.dom.domUtils.trimWhiteTextNode( node ); - * - * //1 - * console.log( node.childNodes.length ); - * ``` - */ - trimWhiteTextNode:function (node) { - function remove(dir) { - var child; - while ((child = node[dir]) && child.nodeType == 3 && domUtils.isWhitespace(child)) { - node.removeChild(child); - } - } - remove('firstChild'); - remove('lastChild'); - }, - - /** - * 合并node节点下相同的子节点 - * @name mergeChild - * @desc - * UE.dom.domUtils.mergeChild(node,tagName) //tagName要合并的子节点的标签 - * @example - *
xxaaxx
- * ==> UE.dom.domUtils.mergeChild(node,'span') - *xxaaxx
- */ - mergeChild:function (node, tagName, attrs) { - var list = domUtils.getElementsByTagName(node, node.tagName.toLowerCase()); - for (var i = 0, ci; ci = list[i++];) { - if (!ci.parentNode || domUtils.isBookmarkNode(ci)) { - continue; - } - //span单独处理 - if (ci.tagName.toLowerCase() == 'span') { - if (node === ci.parentNode) { - domUtils.trimWhiteTextNode(node); - if (node.childNodes.length == 1) { - node.style.cssText = ci.style.cssText + ";" + node.style.cssText; - domUtils.remove(ci, true); + /** + * 判断节点nodeA与节点nodeB的元素的style属性是否一致 + * @method isSameStyle + * @param { Node } nodeA 需要比较的节点 + * @param { Node } nodeB 需要比较的节点 + * @return { Boolean } 两个节点是否具有相同的style属性值 + * @example + * ```html + * ssss + * bbbbb + * ssss + * bbbbb + * + * + * ``` + */ + isSameStyle: function (nodeA, nodeB) { + var styleA = nodeA.style.cssText.replace(/( ?; ?)/g, ';').replace(/( ?: ?)/g, ':'), + styleB = nodeB.style.cssText.replace(/( ?; ?)/g, ';').replace(/( ?: ?)/g, ':'); + if (browser.opera) { + styleA = nodeA.style; + styleB = nodeB.style; + if (styleA.length != styleB.length) + return false; + for (var p in styleA) { + if (/^(\d+|csstext)$/i.test(p)) { continue; } - } - ci.style.cssText = node.style.cssText + ';' + ci.style.cssText; - if (attrs) { - var style = attrs.style; - if (style) { - style = style.split(';'); - for (var j = 0, s; s = style[j++];) { - ci.style[utils.cssStyleToDomStyle(s.split(':')[0])] = s.split(':')[1]; - } + if (styleA[p] != styleB[p]) { + return false; } } - if (domUtils.isSameStyle(ci, node)) { + return true; + } + if (!styleA || !styleB) { + return styleA == styleB; + } + styleA = styleA.split(';'); + styleB = styleB.split(';'); + if (styleA.length != styleB.length) { + return false; + } + for (var i = 0, ci; ci = styleA[i++];) { + if (utils.indexOf(styleB, ci) == -1) { + return false; + } + } + return true; + }, + /** + * 检查节点node是否为block元素 + * @method isBlockElm + * @param { Node } node 需要检测的节点对象 + * @return { Boolean } 是否是block元素节点 + * @warning 该方法的判断规则如下： 如果该元素原本是block元素， 则不论该元素当前的css样式是什么都会返回true； + * 否则，检测该元素的css样式， 如果该元素当前是block元素， 则返回true。 其余情况下都返回false。 + * @example + * ```html + * + * + * + * + * + * ``` + */ + isBlockElm: function (node) { + return node.nodeType == 1 && (dtd.$block[node.tagName] || styleBlock[domUtils.getComputedStyle(node, 'display')]) && !dtd.$nonChild[node.tagName]; + }, + /** + * 检测node节点是否为body节点 + * @method isBody + * @param { Element } node 需要检测的dom元素 + * @return { Boolean } 给定的元素是否是body元素 + * @example + * ```javascript + * //output: true + * console.log( UE.dom.domUtils.isBody( document.body ) ); + * ``` + */ + isBody: function (node) { + return node && node.nodeType == 1 && node.tagName.toLowerCase() == 'body'; + }, + /** + * 以node节点为分界，将该节点的指定祖先节点parent拆分成两个独立的节点， + * 拆分形成的两个节点之间是node节点 + * @method breakParent + * @param { Node } node 作为分界的节点对象 + * @param { Node } parent 该节点必须是node节点的祖先节点， 且是block节点。 + * @return { Node } 给定的node分界节点 + * @example + * ```javascript + * + * var node = document.createElement("span"), + * wrapNode = document.createElement( "div" ), + * parent = document.createElement("p"); + * + * parent.appendChild( node ); + * wrapNode.appendChild( parent ); + * + * //拆分前 + * //output:+ * console.log( wrapNode.innerHTML ); + * + * + * UE.dom.domUtils.breakParent( node, parent ); + * //拆分后 + * //output: + * console.log( wrapNode.innerHTML ); + * + * ``` + */ + breakParent: function (node, parent) { + var tmpNode, + parentClone = node, + clone = node, + leftNodes, + rightNodes; + do { + parentClone = parentClone.parentNode; + if (leftNodes) { + tmpNode = parentClone.cloneNode(false); + tmpNode.appendChild(leftNodes); + leftNodes = tmpNode; + tmpNode = parentClone.cloneNode(false); + tmpNode.appendChild(rightNodes); + rightNodes = tmpNode; + } else { + leftNodes = parentClone.cloneNode(false); + rightNodes = leftNodes.cloneNode(false); + } + while (tmpNode = clone.previousSibling) { + leftNodes.insertBefore(tmpNode, leftNodes.firstChild); + } + while (tmpNode = clone.nextSibling) { + rightNodes.appendChild(tmpNode); + } + clone = parentClone; + } while (parent !== parentClone); + tmpNode = parent.parentNode; + tmpNode.insertBefore(leftNodes, parent); + tmpNode.insertBefore(rightNodes, parent); + tmpNode.insertBefore(node, rightNodes); + domUtils.remove(parent); + return node; + }, + /** + * 检查节点node是否是空inline节点 + * @method isEmptyInlineElement + * @param { Node } node 需要检测的节点对象 + * @return { Number } 如果给定的节点是空的inline节点， 则返回1, 否则返回0。 + * @example + * ```html + * => 1 + * => 1 + * => 1 + * xx => 0 + * ``` + */ + isEmptyInlineElement: function (node) { + if (node.nodeType != 1 || !dtd.$removeEmpty[node.tagName]) { + return 0; + } + node = node.firstChild; + while (node) { + //如果是创建的bookmark就跳过 + if (domUtils.isBookmarkNode(node)) { + return 0; + } + if (node.nodeType == 1 && !domUtils.isEmptyInlineElement(node) || + node.nodeType == 3 && !domUtils.isWhitespace(node) + ) { + return 0; + } + node = node.nextSibling; + } + return 1; + + }, + + /** + * 删除node节点下首尾两端的空白文本子节点 + * @method trimWhiteTextNode + * @param { Element } node 需要执行删除操作的元素对象 + * @example + * ```javascript + * var node = document.createElement("div"); + * + * node.appendChild( document.createTextNode( "" ) ); + * + * node.appendChild( document.createElement("div") ); + * + * node.appendChild( document.createTextNode( "" ) ); + * + * //3 + * console.log( node.childNodes.length ); + * + * UE.dom.domUtils.trimWhiteTextNode( node ); + * + * //1 + * console.log( node.childNodes.length ); + * ``` + */ + trimWhiteTextNode: function (node) { + function remove(dir) { + var child; + while ((child = node[dir]) && child.nodeType == 3 && domUtils.isWhitespace(child)) { + node.removeChild(child); + } + } + + remove('firstChild'); + remove('lastChild'); + }, + + /** + * 合并node节点下相同的子节点 + * @name mergeChild + * @desc + * UE.dom.domUtils.mergeChild(node,tagName) //tagName要合并的子节点的标签 + * @example + *
xxaaxx
+ * ==> UE.dom.domUtils.mergeChild(node,'span') + *xxaaxx
+ */ + mergeChild: function (node, tagName, attrs) { + var list = domUtils.getElementsByTagName(node, node.tagName.toLowerCase()); + for (var i = 0, ci; ci = list[i++];) { + if (!ci.parentNode || domUtils.isBookmarkNode(ci)) { + continue; + } + //span单独处理 + if (ci.tagName.toLowerCase() == 'span') { + if (node === ci.parentNode) { + domUtils.trimWhiteTextNode(node); + if (node.childNodes.length == 1) { + node.style.cssText = ci.style.cssText + ";" + node.style.cssText; + domUtils.remove(ci, true); + continue; + } + } + ci.style.cssText = node.style.cssText + ';' + ci.style.cssText; + if (attrs) { + var style = attrs.style; + if (style) { + style = style.split(';'); + for (var j = 0, s; s = style[j++];) { + ci.style[utils.cssStyleToDomStyle(s.split(':')[0])] = s.split(':')[1]; + } + } + } + if (domUtils.isSameStyle(ci, node)) { + domUtils.remove(ci, true); + } + continue; + } + if (domUtils.isSameElement(node, ci)) { domUtils.remove(ci, true); } - continue; } - if (domUtils.isSameElement(node, ci)) { - domUtils.remove(ci, true); - } - } - }, + }, - /** - * 原生方法getElementsByTagName的封装 - * @method getElementsByTagName - * @param { Node } node 目标节点对象 - * @param { String } tagName 需要查找的节点的tagName， 多个tagName以空格分割 - * @return { Array } 符合条件的节点集合 - */ - getElementsByTagName:function (node, name,filter) { - if(filter && utils.isString(filter)){ - var className = filter; - filter = function(node){return domUtils.hasClass(node,className)} - } - name = utils.trim(name).replace(/[ ]{2,}/g,' ').split(' '); - var arr = []; - for(var n = 0,ni;ni=name[n++];){ - var list = node.getElementsByTagName(ni); - for (var i = 0, ci; ci = list[i++];) { - if(!filter || filter(ci)) - arr.push(ci); + /** + * 原生方法getElementsByTagName的封装 + * @method getElementsByTagName + * @param { Node } node 目标节点对象 + * @param { String } tagName 需要查找的节点的tagName， 多个tagName以空格分割 + * @return { Array } 符合条件的节点集合 + */ + getElementsByTagName: function (node, name, filter) { + if (filter && utils.isString(filter)) { + var className = filter; + filter = function (node) { + return domUtils.hasClass(node, className) + } + } + name = utils.trim(name).replace(/[ ]{2,}/g, ' ').split(' '); + var arr = []; + for (var n = 0, ni; ni = name[n++];) { + var list = node.getElementsByTagName(ni); + for (var i = 0, ci; ci = list[i++];) { + if (!filter || filter(ci)) + arr.push(ci); + } } - } - return arr; - }, - /** - * 将节点node提取到父节点上 - * @method mergeToParent - * @param { Element } node 需要提取的元素对象 - * @example - * ```html - *
- *
- *
- *
- * ```
- */
- mergeToParent:function (node) {
- var parent = node.parentNode;
- while (parent && dtd.$removeEmpty[parent.tagName]) {
- if (parent.tagName == node.tagName || parent.tagName == 'A') {//针对a标签单独处理
- domUtils.trimWhiteTextNode(parent);
- //span需要特殊处理 不处理这样的情况 xxxxxxxxx
- if (parent.tagName == 'SPAN' && !domUtils.isSameStyle(parent, node)
- || (parent.tagName == 'A' && node.tagName == 'SPAN')) {
- if (parent.childNodes.length > 1 || parent !== node.parentNode) {
- node.style.cssText = parent.style.cssText + ";" + node.style.cssText;
- parent = parent.parentNode;
- continue;
- } else {
- parent.style.cssText += ";" + node.style.cssText;
- //trace:952 a标签要保持下划线
- if (parent.tagName == 'A') {
- parent.style.textDecoration = 'underline';
+ return arr;
+ },
+ /**
+ * 将节点node提取到父节点上
+ * @method mergeToParent
+ * @param { Element } node 需要提取的元素对象
+ * @example
+ * ```html
+ *
- *
- *
- *
+ *
+ *
+ *
+ * ```
+ */
+ mergeToParent: function (node) {
+ var parent = node.parentNode;
+ while (parent && dtd.$removeEmpty[parent.tagName]) {
+ if (parent.tagName == node.tagName || parent.tagName == 'A') {//针对a标签单独处理
+ domUtils.trimWhiteTextNode(parent);
+ //span需要特殊处理 不处理这样的情况 xxxxxxxxx
+ if (parent.tagName == 'SPAN' && !domUtils.isSameStyle(parent, node)
+ || (parent.tagName == 'A' && node.tagName == 'SPAN')) {
+ if (parent.childNodes.length > 1 || parent !== node.parentNode) {
+ node.style.cssText = parent.style.cssText + ";" + node.style.cssText;
+ parent = parent.parentNode;
+ continue;
+ } else {
+ parent.style.cssText += ";" + node.style.cssText;
+ //trace:952 a标签要保持下划线
+ if (parent.tagName == 'A') {
+ parent.style.textDecoration = 'underline';
+ }
}
}
- }
- if (parent.tagName != 'A') {
- parent === node.parentNode && domUtils.remove(node, true);
- break;
- }
- }
- parent = parent.parentNode;
- }
- },
- /**
- * 合并节点node的左右兄弟节点
- * @method mergeSibling
- * @param { Element } node 需要合并的目标节点
- * @example
- * ```html
- * xxxxoooxxxx
- *
- *
- * ```
- */
-
- /**
- * 合并节点node的左右兄弟节点， 可以根据给定的条件选择是否忽略合并左节点。
- * @method mergeSibling
- * @param { Element } node 需要合并的目标节点
- * @param { Boolean } ignorePre 是否忽略合并左节点
- * @example
- * ```html
- * xxxxoooxxxx
- *
- *
- * ```
- */
-
- /**
- * 合并节点node的左右兄弟节点，可以根据给定的条件选择是否忽略合并左右节点。
- * @method mergeSibling
- * @param { Element } node 需要合并的目标节点
- * @param { Boolean } ignorePre 是否忽略合并左节点
- * @param { Boolean } ignoreNext 是否忽略合并右节点
- * @remind 如果同时忽略左右节点， 则该操作什么也不会做
- * @example
- * ```html
- * xxxxoooxxxx
- *
- *
- * ```
- */
- mergeSibling:function (node, ignorePre, ignoreNext) {
- function merge(rtl, start, node) {
- var next;
- if ((next = node[rtl]) && !domUtils.isBookmarkNode(next) && next.nodeType == 1 && domUtils.isSameElement(node, next)) {
- while (next.firstChild) {
- if (start == 'firstChild') {
- node.insertBefore(next.lastChild, node.firstChild);
- } else {
- node.appendChild(next.firstChild);
+ if (parent.tagName != 'A') {
+ parent === node.parentNode && domUtils.remove(node, true);
+ break;
}
}
- domUtils.remove(next);
+ parent = parent.parentNode;
}
- }
- !ignorePre && merge('previousSibling', 'firstChild', node);
- !ignoreNext && merge('nextSibling', 'lastChild', node);
- },
+ },
+ /**
+ * 合并节点node的左右兄弟节点
+ * @method mergeSibling
+ * @param { Element } node 需要合并的目标节点
+ * @example
+ * ```html
+ * xxxxoooxxxx
+ *
+ *
+ * ```
+ */
- /**
- * 设置节点node及其子节点不会被选中
- * @method unSelectable
- * @param { Element } node 需要执行操作的dom元素
- * @remind 执行该操作后的节点， 将不能被鼠标选中
- * @example
- * ```javascript
- * UE.dom.domUtils.unSelectable( document.body );
- * ```
- */
- unSelectable:ie && browser.ie9below || browser.opera ? function (node) {
- //for ie9
- node.onselectstart = function () {
- return false;
- };
- node.onclick = node.onkeyup = node.onkeydown = function () {
- return false;
- };
- node.unselectable = 'on';
- node.setAttribute("unselectable", "on");
- for (var i = 0, ci; ci = node.all[i++];) {
- switch (ci.tagName.toLowerCase()) {
- case 'iframe' :
- case 'textarea' :
- case 'input' :
- case 'select' :
- break;
- default :
- ci.unselectable = 'on';
- node.setAttribute("unselectable", "on");
- }
- }
- } : function (node) {
- node.style.MozUserSelect =
- node.style.webkitUserSelect =
- node.style.msUserSelect =
- node.style.KhtmlUserSelect = 'none';
- },
- /**
- * 删除节点node上的指定属性名称的属性
- * @method removeAttributes
- * @param { Node } node 需要删除属性的节点对象
- * @param { String } attrNames 可以是空格隔开的多个属性名称，该操作将会依次删除相应的属性
- * @example
- * ```html
- *
+ *
+ *
+ *
- * xxxxx
- *
- *
- *
- * ```
- */
+ /**
+ * 合并节点node的左右兄弟节点， 可以根据给定的条件选择是否忽略合并左节点。
+ * @method mergeSibling
+ * @param { Element } node 需要合并的目标节点
+ * @param { Boolean } ignorePre 是否忽略合并左节点
+ * @example
+ * ```html
+ * xxxxoooxxxx
+ *
+ *
+ * ```
+ */
- /**
- * 删除节点node上的指定属性名称的属性
- * @method removeAttributes
- * @param { Node } node 需要删除属性的节点对象
- * @param { Array } attrNames 需要删除的属性名数组
- * @example
- * ```html
- *
- * xxxxx
- *
- *
- *
- * ```
- */
- removeAttributes:function (node, attrNames) {
- attrNames = utils.isArray(attrNames) ? attrNames : utils.trim(attrNames).replace(/[ ]{2,}/g,' ').split(' ');
- for (var i = 0, ci; ci = attrNames[i++];) {
- ci = attrFix[ci] || ci;
- switch (ci) {
- case 'className':
- node[ci] = '';
- break;
- case 'style':
- node.style.cssText = '';
- var val = node.getAttributeNode('style');
- !browser.ie && val && node.removeAttributeNode(val);
- }
- node.removeAttribute(ci);
- }
- },
- /**
- * 在doc下创建一个标签名为tag，属性为attrs的元素
- * @method createElement
- * @param { DomDocument } doc 新创建的元素属于该document节点创建
- * @param { String } tagName 需要创建的元素的标签名
- * @param { Object } attrs 新创建的元素的属性key-value集合
- * @return { Element } 新创建的元素对象
- * @example
- * ```javascript
- * var ele = UE.dom.domUtils.createElement( document, 'div', {
- * id: 'test'
- * } );
- *
- * //output: DIV
- * console.log( ele.tagName );
- *
- * //output: test
- * console.log( ele.id );
- *
- * ```
- */
- createElement:function (doc, tag, attrs) {
- return domUtils.setAttributes(doc.createElement(tag), attrs)
- },
- /**
- * 为节点node添加属性attrs，attrs为属性键值对
- * @method setAttributes
- * @param { Element } node 需要设置属性的元素对象
- * @param { Object } attrs 需要设置的属性名-值对
- * @return { Element } 设置属性的元素对象
- * @example
- * ```html
- *
- *
- *
- *
- */
- setAttributes:function (node, attrs) {
- for (var attr in attrs) {
- if(attrs.hasOwnProperty(attr)){
- var value = attrs[attr];
- switch (attr) {
- case 'class':
- //ie下要这样赋值，setAttribute不起作用
- node.className = value;
- break;
- case 'style' :
- node.style.cssText = node.style.cssText + ";" + value;
- break;
- case 'innerHTML':
- node[attr] = value;
- break;
- case 'value':
- node.value = value;
- break;
- default:
- node.setAttribute(attrFix[attr] || attr, value);
+ /**
+ * 合并节点node的左右兄弟节点，可以根据给定的条件选择是否忽略合并左右节点。
+ * @method mergeSibling
+ * @param { Element } node 需要合并的目标节点
+ * @param { Boolean } ignorePre 是否忽略合并左节点
+ * @param { Boolean } ignoreNext 是否忽略合并右节点
+ * @remind 如果同时忽略左右节点， 则该操作什么也不会做
+ * @example
+ * ```html
+ * xxxxoooxxxx
+ *
+ *
+ * ```
+ */
+ mergeSibling: function (node, ignorePre, ignoreNext) {
+ function merge(rtl, start, node) {
+ var next;
+ if ((next = node[rtl]) && !domUtils.isBookmarkNode(next) && next.nodeType == 1 && domUtils.isSameElement(node, next)) {
+ while (next.firstChild) {
+ if (start == 'firstChild') {
+ node.insertBefore(next.lastChild, node.firstChild);
+ } else {
+ node.appendChild(next.firstChild);
+ }
+ }
+ domUtils.remove(next);
}
}
- }
- return node;
- },
- /**
- * 获取元素element经过计算后的样式值
- * @method getComputedStyle
- * @param { Element } element 需要获取样式的元素对象
- * @param { String } styleName 需要获取的样式名
- * @return { String } 获取到的样式值
- * @example
- * ```html
- *
- *
- *
- *
- *
- * ```
- */
- getComputedStyle:function (element, styleName) {
- //一下的属性单独处理
- var pros = 'width height top left';
+ !ignorePre && merge('previousSibling', 'firstChild', node);
+ !ignoreNext && merge('nextSibling', 'lastChild', node);
+ },
- if(pros.indexOf(styleName) > -1){
- return element['offset' + styleName.replace(/^\w/,function(s){return s.toUpperCase()})] + 'px';
- }
- //忽略文本节点
- if (element.nodeType == 3) {
- element = element.parentNode;
- }
- //ie下font-size若body下定义了font-size，则从currentStyle里会取到这个font-size. 取不到实际值，故此修改.
- if (browser.ie && browser.version < 9 && styleName == 'font-size' && !element.style.fontSize &&
- !dtd.$empty[element.tagName] && !dtd.$nonChild[element.tagName]) {
- var span = element.ownerDocument.createElement('span');
- span.style.cssText = 'padding:0;border:0;font-family:simsun;';
- span.innerHTML = '.';
- element.appendChild(span);
- var result = span.offsetHeight;
- element.removeChild(span);
- span = null;
- return result + 'px';
- }
- try {
- var value = domUtils.getStyle(element, styleName) ||
- (window.getComputedStyle ? domUtils.getWindow(element).getComputedStyle(element, '').getPropertyValue(styleName) :
- ( element.currentStyle || element.style )[utils.cssStyleToDomStyle(styleName)]);
-
- } catch (e) {
- return "";
- }
- return utils.transUnitToPx(utils.fixColor(styleName, value));
- },
- /**
- * 删除元素element指定的className
- * @method removeClasses
- * @param { Element } ele 需要删除class的元素节点
- * @param { String } classNames 需要删除的className， 多个className之间以空格分开
- * @example
- * ```html
- * xxx
- *
- *
- * ```
- */
-
- /**
- * 删除元素element指定的className
- * @method removeClasses
- * @param { Element } ele 需要删除class的元素节点
- * @param { Array } classNames 需要删除的className数组
- * @example
- * ```html
- * xxx
- *
- *
- * ```
- */
- removeClasses:function (elm, classNames) {
- classNames = utils.isArray(classNames) ? classNames :
- utils.trim(classNames).replace(/[ ]{2,}/g,' ').split(' ');
- for(var i = 0,ci,cls = elm.className;ci=classNames[i++];){
- cls = cls.replace(new RegExp('\\b' + ci + '\\b'),'')
- }
- cls = utils.trim(cls).replace(/[ ]{2,}/g,' ');
- if(cls){
- elm.className = cls;
- }else{
- domUtils.removeAttributes(elm,['class']);
- }
- },
- /**
- * 给元素element添加className
- * @method addClass
- * @param { Node } ele 需要增加className的元素
- * @param { String } classNames 需要添加的className， 多个className之间以空格分割
- * @remind 相同的类名不会被重复添加
- * @example
- * ```html
- *
- *
- *
- * ```
- */
-
- /**
- * 判断元素element是否包含给定的样式类名className
- * @method hasClass
- * @param { Node } ele 需要检测的元素
- * @param { Array } classNames 需要检测的className数组
- * @return { Boolean } 元素是否包含所有给定的className
- * @example
- * ```html
- *
- *
- *
- * ```
- */
- hasClass:function (element, className) {
- if(utils.isRegExp(className)){
- return className.test(element.className)
- }
- className = utils.trim(className).replace(/[ ]{2,}/g,' ').split(' ');
- for(var i = 0,ci,cls = element.className;ci=className[i++];){
- if(!new RegExp('\\b' + ci + '\\b','i').test(cls)){
+ /**
+ * 设置节点node及其子节点不会被选中
+ * @method unSelectable
+ * @param { Element } node 需要执行操作的dom元素
+ * @remind 执行该操作后的节点， 将不能被鼠标选中
+ * @example
+ * ```javascript
+ * UE.dom.domUtils.unSelectable( document.body );
+ * ```
+ */
+ unSelectable: ie && browser.ie9below || browser.opera ? function (node) {
+ //for ie9
+ node.onselectstart = function () {
return false;
- }
- }
- return i - 1 == className.length;
- },
-
- /**
- * 阻止事件默认行为
- * @method preventDefault
- * @param { Event } evt 需要阻止默认行为的事件对象
- * @example
- * ```javascript
- * UE.dom.domUtils.preventDefault( evt );
- * ```
- */
- preventDefault:function (evt) {
- evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
- },
- /**
- * 删除元素element指定的样式
- * @method removeStyle
- * @param { Element } element 需要删除样式的元素
- * @param { String } styleName 需要删除的样式名
- * @example
- * ```html
- *
- *
- *
- * ```
- */
- removeStyle:function (element, name) {
- if(browser.ie ){
- //针对color先单独处理一下
- if(name == 'color'){
- name = '(^|;)' + name;
- }
- element.style.cssText = element.style.cssText.replace(new RegExp(name + '[^:]*:[^;]+;?','ig'),'')
- }else{
- if (element.style.removeProperty) {
- element.style.removeProperty (name);
- }else {
- element.style.removeAttribute (utils.cssStyleToDomStyle(name));
- }
- }
-
-
- if (!element.style.cssText) {
- domUtils.removeAttributes(element, ['style']);
- }
- },
- /**
- * 获取元素element的style属性的指定值
- * @method getStyle
- * @param { Element } element 需要获取属性值的元素
- * @param { String } styleName 需要获取的style的名称
- * @warning 该方法仅获取元素style属性中所标明的值
- * @return { String } 该元素包含指定的style属性值
- * @example
- * ```html
- *
- *
- *
- * ```
- */
- getStyle:function (element, name) {
- var value = element.style[ utils.cssStyleToDomStyle(name) ];
- return utils.fixColor(name, value);
- },
- /**
- * 为元素element设置样式属性值
- * @method setStyle
- * @param { Element } element 需要设置样式的元素
- * @param { String } styleName 样式名
- * @param { String } styleValue 样式值
- * @example
- * ```html
- *
- *
- *
- * ```
- */
- setStyle:function (element, name, value) {
- element.style[utils.cssStyleToDomStyle(name)] = value;
- if(!utils.trim(element.style.cssText)){
- this.removeAttributes(element,'style')
- }
- },
- /**
- * 为元素element设置多个样式属性值
- * @method setStyles
- * @param { Element } element 需要设置样式的元素
- * @param { Object } styles 样式名值对
- * @example
- * ```html
- *
- *
- *
- * ```
- */
- setStyles:function (element, styles) {
- for (var name in styles) {
- if (styles.hasOwnProperty(name)) {
- domUtils.setStyle(element, name, styles[name]);
- }
- }
- },
- /**
- * 删除_moz_dirty属性
- * @private
- * @method removeDirtyAttr
- */
- removeDirtyAttr:function (node) {
- for (var i = 0, ci, nodes = node.getElementsByTagName('*'); ci = nodes[i++];) {
- ci.removeAttribute('_moz_dirty');
- }
- node.removeAttribute('_moz_dirty');
- },
- /**
- * 获取子节点的数量
- * @method getChildCount
- * @param { Element } node 需要检测的元素
- * @return { Number } 给定的node元素的子节点数量
- * @example
- * ```html
- *
- *
- *
- *
- *
- * ```
- */
-
- /**
- * 根据给定的过滤规则， 获取符合条件的子节点的数量
- * @method getChildCount
- * @param { Element } node 需要检测的元素
- * @param { Function } fn 过滤器， 要求对符合条件的子节点返回true， 反之则要求返回false
- * @return { Number } 符合过滤条件的node元素的子节点数量
- * @example
- * ```html
- *
- *
- *
- *
- *
- * ```
- */
- getChildCount:function (node, fn) {
- var count = 0, first = node.firstChild;
- fn = fn || function () {
- return 1;
- };
- while (first) {
- if (fn(first)) {
- count++;
- }
- first = first.nextSibling;
- }
- return count;
- },
-
- /**
- * 判断给定节点是否为空节点
- * @method isEmptyNode
- * @param { Node } node 需要检测的节点对象
- * @return { Boolean } 节点是否为空
- * @example
- * ```javascript
- * UE.dom.domUtils.isEmptyNode( document.body );
- * ```
- */
- isEmptyNode:function (node) {
- return !node.firstChild || domUtils.getChildCount(node, function (node) {
- return !domUtils.isBr(node) && !domUtils.isBookmarkNode(node) && !domUtils.isWhitespace(node)
- }) == 0
- },
- clearSelectedArr:function (nodes) {
- var node;
- while (node = nodes.pop()) {
- domUtils.removeAttributes(node, ['class']);
- }
- },
- /**
- * 将显示区域滚动到指定节点的位置
- * @method scrollToView
- * @param {Node} node 节点
- * @param {window} win window对象
- * @param {Number} offsetTop 距离上方的偏移量
- */
- scrollToView:function (node, win, offsetTop) {
- var getViewPaneSize = function () {
- var doc = win.document,
- mode = doc.compatMode == 'CSS1Compat';
- return {
- width:( mode ? doc.documentElement.clientWidth : doc.body.clientWidth ) || 0,
- height:( mode ? doc.documentElement.clientHeight : doc.body.clientHeight ) || 0
- };
- },
- getScrollPosition = function (win) {
- if ('pageXOffset' in win) {
- return {
- x:win.pageXOffset || 0,
- y:win.pageYOffset || 0
- };
- }
- else {
- var doc = win.document;
- return {
- x:doc.documentElement.scrollLeft || doc.body.scrollLeft || 0,
- y:doc.documentElement.scrollTop || doc.body.scrollTop || 0
- };
- }
};
- var winHeight = getViewPaneSize().height, offset = winHeight * -1 + offsetTop;
- offset += (node.offsetHeight || 0);
- var elementPosition = domUtils.getXY(node);
- offset += elementPosition.y;
- var currentScroll = getScrollPosition(win).y;
- // offset += 50;
- if (offset > currentScroll || offset < currentScroll - winHeight) {
- win.scrollTo(0, offset + (offset < 0 ? -20 : 20));
- }
- },
- /**
- * 判断给定节点是否为br
- * @method isBr
- * @param { Node } node 需要判断的节点对象
- * @return { Boolean } 给定的节点是否是br节点
- */
- isBr:function (node) {
- return node.nodeType == 1 && node.tagName == 'BR';
- },
- /**
- * 判断给定的节点是否是一个“填充”节点
- * @private
- * @method isFillChar
- * @param { Node } node 需要判断的节点
- * @param { Boolean } isInStart 是否从节点内容的开始位置匹配
- * @returns { Boolean } 节点是否是填充节点
- */
- isFillChar:function (node,isInStart) {
- if(node.nodeType != 3)
- return false;
- var text = node.nodeValue;
- if(isInStart){
- return new RegExp('^' + domUtils.fillChar).test(text)
- }
- return !text.replace(new RegExp(domUtils.fillChar,'g'), '').length
- },
- isStartInblock:function (range) {
- var tmpRange = range.cloneRange(),
- flag = 0,
- start = tmpRange.startContainer,
- tmp;
- if(start.nodeType == 1 && start.childNodes[tmpRange.startOffset]){
- start = start.childNodes[tmpRange.startOffset];
- var pre = start.previousSibling;
- while(pre && domUtils.isFillChar(pre)){
- start = pre;
- pre = pre.previousSibling;
- }
- }
- if(this.isFillChar(start,true) && tmpRange.startOffset == 1){
- tmpRange.setStartBefore(start);
- start = tmpRange.startContainer;
- }
-
- while (start && domUtils.isFillChar(start)) {
- tmp = start;
- start = start.previousSibling
- }
- if (tmp) {
- tmpRange.setStartBefore(tmp);
- start = tmpRange.startContainer;
- }
- if (start.nodeType == 1 && domUtils.isEmptyNode(start) && tmpRange.startOffset == 1) {
- tmpRange.setStart(start, 0).collapse(true);
- }
- while (!tmpRange.startOffset) {
- start = tmpRange.startContainer;
- if (domUtils.isBlockElm(start) || domUtils.isBody(start)) {
- flag = 1;
- break;
- }
- var pre = tmpRange.startContainer.previousSibling,
- tmpNode;
- if (!pre) {
- tmpRange.setStartBefore(tmpRange.startContainer);
- } else {
- while (pre && domUtils.isFillChar(pre)) {
- tmpNode = pre;
- pre = pre.previousSibling;
- }
- if (tmpNode) {
- tmpRange.setStartBefore(tmpNode);
- } else {
- tmpRange.setStartBefore(tmpRange.startContainer);
- }
- }
- }
- return flag && !domUtils.isBody(tmpRange.startContainer) ? 1 : 0;
- },
-
- /**
- * 判断给定的元素是否是一个空元素
- * @method isEmptyBlock
- * @param { Element } node 需要判断的元素
- * @return { Boolean } 是否是空元素
- * @example
- * ```html
- *
- *
- *
- * ```
- */
-
- /**
- * 根据指定的判断规则判断给定的元素是否是一个空元素
- * @method isEmptyBlock
- * @param { Element } node 需要判断的元素
- * @param { RegExp } reg 对内容执行判断的正则表达式对象
- * @return { Boolean } 是否是空元素
- */
- isEmptyBlock:function (node,reg) {
- if(node.nodeType != 1)
- return 0;
- reg = reg || new RegExp('[ \xa0\t\r\n' + domUtils.fillChar + ']', 'g');
-
- if (node[browser.ie ? 'innerText' : 'textContent'].replace(reg, '').length > 0) {
- return 0;
- }
- for (var n in dtd.$isNotEmpty) {
- if (node.getElementsByTagName(n).length) {
- return 0;
- }
- }
- return 1;
- },
-
- /**
- * 移动元素使得该元素的位置移动指定的偏移量的距离
- * @method setViewportOffset
- * @param { Element } element 需要设置偏移量的元素
- * @param { Object } offset 偏移量， 形如{ left: 100, top: 50 }的一个键值对， 表示该元素将在
- * 现有的位置上向水平方向偏移offset.left的距离， 在竖直方向上偏移
- * offset.top的距离
- * @example
- * ```html
- *
- *
- *
- * ```
- */
- setViewportOffset:function (element, offset) {
- var left = parseInt(element.style.left) | 0;
- var top = parseInt(element.style.top) | 0;
- var rect = element.getBoundingClientRect();
- var offsetLeft = offset.left - rect.left;
- var offsetTop = offset.top - rect.top;
- if (offsetLeft) {
- element.style.left = left + offsetLeft + 'px';
- }
- if (offsetTop) {
- element.style.top = top + offsetTop + 'px';
- }
- },
-
- /**
- * 用“填充字符”填充节点
- * @method fillNode
- * @private
- * @param { DomDocument } doc 填充的节点所在的docment对象
- * @param { Node } node 需要填充的节点对象
- * @example
- * ```html
- *
- *
- *
- * ```
- */
- fillNode:function (doc, node) {
- var tmpNode = browser.ie ? doc.createTextNode(domUtils.fillChar) : doc.createElement('br');
- node.innerHTML = '';
- node.appendChild(tmpNode);
- },
-
- /**
- * 把节点src的所有子节点追加到另一个节点tag上去
- * @method moveChild
- * @param { Node } src 源节点， 该节点下的所有子节点将被移除
- * @param { Node } tag 目标节点， 从源节点移除的子节点将被追加到该节点下
- * @example
- * ```html
- *
- *
- *
- *
- *
- *
- *
- *
- * ```
- */
-
- /**
- * 把节点src的所有子节点移动到另一个节点tag上去, 可以通过dir参数控制附加的行为是“追加”还是“插入顶部”
- * @method moveChild
- * @param { Node } src 源节点， 该节点下的所有子节点将被移除
- * @param { Node } tag 目标节点， 从源节点移除的子节点将被附加到该节点下
- * @param { Boolean } dir 附加方式， 如果为true， 则附加进去的节点将被放到目标节点的顶部， 反之，则放到末尾
- * @example
- * ```html
- *
- *
- *
- *
- *
- *
- *
- *
- * ```
- */
- moveChild:function (src, tag, dir) {
- while (src.firstChild) {
- if (dir && tag.firstChild) {
- tag.insertBefore(src.lastChild, tag.firstChild);
- } else {
- tag.appendChild(src.firstChild);
- }
- }
- },
-
- /**
- * 判断节点的标签上是否不存在任何属性
- * @method hasNoAttributes
- * @private
- * @param { Node } node 需要检测的节点对象
- * @return { Boolean } 节点是否不包含任何属性
- * @example
- * ```html
- * xxxx
- *
- *
- * ```
- */
- hasNoAttributes:function (node) {
- return browser.ie ? /^<\w+\s*?>/.test(node.outerHTML) : node.attributes.length == 0;
- },
-
- /**
- * 检测节点是否是UEditor所使用的辅助节点
- * @method isCustomeNode
- * @private
- * @param { Node } node 需要检测的节点
- * @remind 辅助节点是指编辑器要完成工作临时添加的节点， 在输出的时候将会从编辑器内移除， 不会影响最终的结果。
- * @return { Boolean } 给定的节点是否是一个辅助节点
- */
- isCustomeNode:function (node) {
- return node.nodeType == 1 && node.getAttribute('_ue_custom_node_');
- },
-
- /**
- * 检测节点的标签是否是给定的标签
- * @method isTagNode
- * @param { Node } node 需要检测的节点对象
- * @param { String } tagName 标签
- * @return { Boolean } 节点的标签是否是给定的标签
- * @example
- * ```html
- *
- *
- *
- * ```
- */
- isTagNode:function (node, tagNames) {
- return node.nodeType == 1 && new RegExp('\\b' + node.tagName + '\\b','i').test(tagNames)
- },
-
- /**
- * 给定一个节点数组，在通过指定的过滤器过滤后， 获取其中满足过滤条件的第一个节点
- * @method filterNodeList
- * @param { Array } nodeList 需要过滤的节点数组
- * @param { Function } fn 过滤器， 对符合条件的节点， 执行结果返回true， 反之则返回false
- * @return { Node | NULL } 如果找到符合过滤条件的节点， 则返回该节点， 否则返回NULL
- * @example
- * ```javascript
- * var divNodes = document.getElementsByTagName("div");
- * divNodes = [].slice.call( divNodes, 0 );
- *
- * //output: null
- * console.log( UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
- * return node.tagName.toLowerCase() !== 'div';
- * } ) );
- * ```
- */
-
- /**
- * 给定一个节点数组nodeList和一组标签名tagNames， 获取其中能够匹配标签名的节点集合中的第一个节点
- * @method filterNodeList
- * @param { Array } nodeList 需要过滤的节点数组
- * @param { String } tagNames 需要匹配的标签名， 多个标签名之间用空格分割
- * @return { Node | NULL } 如果找到标签名匹配的节点， 则返回该节点， 否则返回NULL
- * @example
- * ```javascript
- * var divNodes = document.getElementsByTagName("div");
- * divNodes = [].slice.call( divNodes, 0 );
- *
- * //output: null
- * console.log( UE.dom.domUtils.filterNodeList( divNodes, 'a span' ) );
- * ```
- */
-
- /**
- * 给定一个节点数组，在通过指定的过滤器过滤后， 如果参数forAll为true， 则会返回所有满足过滤
- * 条件的节点集合， 否则， 返回满足条件的节点集合中的第一个节点
- * @method filterNodeList
- * @param { Array } nodeList 需要过滤的节点数组
- * @param { Function } fn 过滤器， 对符合条件的节点， 执行结果返回true， 反之则返回false
- * @param { Boolean } forAll 是否返回整个节点数组, 如果该参数为false， 则返回节点集合中的第一个节点
- * @return { Array | Node | NULL } 如果找到符合过滤条件的节点， 则根据参数forAll的值决定返回满足
- * 过滤条件的节点数组或第一个节点， 否则返回NULL
- * @example
- * ```javascript
- * var divNodes = document.getElementsByTagName("div");
- * divNodes = [].slice.call( divNodes, 0 );
- *
- * //output: 3（假定有3个div）
- * console.log( divNodes.length );
- *
- * var nodes = UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
- * return node.tagName.toLowerCase() === 'div';
- * }, true );
- *
- * //output: 3
- * console.log( nodes.length );
- *
- * var node = UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
- * return node.tagName.toLowerCase() === 'div';
- * }, false );
- *
- * //output: div
- * console.log( node.nodeName );
- * ```
- */
- filterNodeList : function(nodelist,filter,forAll){
- var results = [];
- if(!utils .isFunction(filter)){
- var str = filter;
- filter = function(n){
- return utils.indexOf(utils.isArray(str) ? str:str.split(' '), n.tagName.toLowerCase()) != -1
- };
- }
- utils.each(nodelist,function(n){
- filter(n) && results.push(n)
- });
- return results.length == 0 ? null : results.length == 1 || !forAll ? results[0] : results
- },
-
- /**
- * 查询给定的range选区是否在给定的node节点内，且在该节点的最末尾
- * @method isInNodeEndBoundary
- * @param { UE.dom.Range } rng 需要判断的range对象， 该对象的startContainer不能为NULL
- * @param node 需要检测的节点对象
- * @return { Number } 如果给定的选取range对象是在node内部的最末端， 则返回1, 否则返回0
- */
- isInNodeEndBoundary : function (rng,node){
- var start = rng.startContainer;
- if(start.nodeType == 3 && rng.startOffset != start.nodeValue.length){
- return 0;
- }
- if(start.nodeType == 1 && rng.startOffset != start.childNodes.length){
- return 0;
- }
- while(start !== node){
- if(start.nextSibling){
- return 0
- };
- start = start.parentNode;
- }
- return 1;
- },
- isBoundaryNode : function (node,dir){
- var tmp;
- while(!domUtils.isBody(node)){
- tmp = node;
- node = node.parentNode;
- if(tmp !== node[dir]){
+ node.onclick = node.onkeyup = node.onkeydown = function () {
return false;
- }
- }
- return true;
- },
- fillHtml : browser.ie11below ? ' ' : '' -}; -var fillCharReg = new RegExp(domUtils.fillChar, 'g'); - -// core/Range.js -/** - * Range封装 - * @file - * @module UE.dom - * @class Range - * @since 1.2.6.1 - */ - -/** - * dom操作封装 - * @unfile - * @module UE.dom - */ - -/** - * Range实现类，本类是UEditor底层核心类，封装不同浏览器之间的Range操作。 - * @unfile - * @module UE.dom - * @class Range - */ - - -(function () { - var guid = 0, - fillChar = domUtils.fillChar, - fillData; - - /** - * 更新range的collapse状态 - * @param {Range} range range对象 - */ - function updateCollapse(range) { - range.collapsed = - range.startContainer && range.endContainer && - range.startContainer === range.endContainer && - range.startOffset == range.endOffset; - } - - function selectOneNode(rng){ - return !rng.collapsed && rng.startContainer.nodeType == 1 && rng.startContainer === rng.endContainer && rng.endOffset - rng.startOffset == 1 - } - function setEndPoint(toStart, node, offset, range) { - //如果node是自闭合标签要处理 - if (node.nodeType == 1 && (dtd.$empty[node.tagName] || dtd.$nonChild[node.tagName])) { - offset = domUtils.getNodeIndex(node) + (toStart ? 0 : 1); - node = node.parentNode; - } - if (toStart) { - range.startContainer = node; - range.startOffset = offset; - if (!range.endContainer) { - range.collapse(true); - } - } else { - range.endContainer = node; - range.endOffset = offset; - if (!range.startContainer) { - range.collapse(false); - } - } - updateCollapse(range); - return range; - } - - function execContentsAction(range, action) { - //调整边界 - //range.includeBookmark(); - var start = range.startContainer, - end = range.endContainer, - startOffset = range.startOffset, - endOffset = range.endOffset, - doc = range.document, - frag = doc.createDocumentFragment(), - tmpStart, tmpEnd; - if (start.nodeType == 1) { - start = start.childNodes[startOffset] || (tmpStart = start.appendChild(doc.createTextNode(''))); - } - if (end.nodeType == 1) { - end = end.childNodes[endOffset] || (tmpEnd = end.appendChild(doc.createTextNode(''))); - } - if (start === end && start.nodeType == 3) { - frag.appendChild(doc.createTextNode(start.substringData(startOffset, endOffset - startOffset))); - //is not clone - if (action) { - start.deleteData(startOffset, endOffset - startOffset); - range.collapse(true); - } - return frag; - } - var current, currentLevel, clone = frag, - startParents = domUtils.findParents(start, true), endParents = domUtils.findParents(end, true); - for (var i = 0; startParents[i] == endParents[i];) { - i++; - } - for (var j = i, si; si = startParents[j]; j++) { - current = si.nextSibling; - if (si == start) { - if (!tmpStart) { - if (range.startContainer.nodeType == 3) { - clone.appendChild(doc.createTextNode(start.nodeValue.slice(startOffset))); - //is not clone - if (action) { - start.deleteData(startOffset, start.nodeValue.length - startOffset); - } - } else { - clone.appendChild(!action ? start.cloneNode(true) : start); - } - } - } else { - currentLevel = si.cloneNode(false); - clone.appendChild(currentLevel); - } - while (current) { - if (current === end || current === endParents[j]) { - break; - } - si = current.nextSibling; - clone.appendChild(!action ? current.cloneNode(true) : current); - current = si; - } - clone = currentLevel; - } - clone = frag; - if (!startParents[i]) { - clone.appendChild(startParents[i - 1].cloneNode(false)); - clone = clone.firstChild; - } - for (var j = i, ei; ei = endParents[j]; j++) { - current = ei.previousSibling; - if (ei == end) { - if (!tmpEnd && range.endContainer.nodeType == 3) { - clone.appendChild(doc.createTextNode(end.substringData(0, endOffset))); - //is not clone - if (action) { - end.deleteData(0, endOffset); - } - } - } else { - currentLevel = ei.cloneNode(false); - clone.appendChild(currentLevel); - } - //如果两端同级，右边第一次已经被开始做了 - if (j != i || !startParents[i]) { - while (current) { - if (current === start) { + }; + node.unselectable = 'on'; + node.setAttribute("unselectable", "on"); + for (var i = 0, ci; ci = node.all[i++];) { + switch (ci.tagName.toLowerCase()) { + case 'iframe' : + case 'textarea' : + case 'input' : + case 'select' : break; - } - ei = current.previousSibling; - clone.insertBefore(!action ? current.cloneNode(true) : current, clone.firstChild); - current = ei; + default : + ci.unselectable = 'on'; + node.setAttribute("unselectable", "on"); } } - clone = currentLevel; - } - if (action) { - range.setStartBefore(!endParents[i] ? endParents[i - 1] : !startParents[i] ? startParents[i - 1] : endParents[i]).collapse(true); - } - tmpStart && domUtils.remove(tmpStart); - tmpEnd && domUtils.remove(tmpEnd); - return frag; - } - - /** - * 创建一个跟document绑定的空的Range实例 - * @constructor - * @param { Document } document 新建的选区所属的文档对象 - */ - - /** - * @property { Node } startContainer 当前Range的开始边界的容器节点, 可以是一个元素节点或者是文本节点 - */ - - /** - * @property { Node } startOffset 当前Range的开始边界容器节点的偏移量, 如果是元素节点， - * 该值就是childNodes中的第几个节点， 如果是文本节点就是文本内容的第几个字符 - */ - - /** - * @property { Node } endContainer 当前Range的结束边界的容器节点, 可以是一个元素节点或者是文本节点 - */ - - /** - * @property { Node } endOffset 当前Range的结束边界容器节点的偏移量, 如果是元素节点， - * 该值就是childNodes中的第几个节点， 如果是文本节点就是文本内容的第几个字符 - */ - - /** - * @property { Boolean } collapsed 当前Range是否闭合 - * @default true - * @remind Range是闭合的时候， startContainer === endContainer && startOffset === endOffset - */ - - /** - * @property { Document } document 当前Range所属的Document对象 - * @remind 不同range的的document属性可以是不同的 - */ - var Range = dom.Range = function (document) { - var me = this; - me.startContainer = - me.startOffset = - me.endContainer = - me.endOffset = null; - me.document = document; - me.collapsed = true; - }; - - /** - * 删除fillData - * @param doc - * @param excludeNode - */ - function removeFillData(doc, excludeNode) { - try { - if (fillData && domUtils.inDoc(fillData, doc)) { - if (!fillData.nodeValue.replace(fillCharReg, '').length) { - var tmpNode = fillData.parentNode; - domUtils.remove(fillData); - while (tmpNode && domUtils.isEmptyInlineElement(tmpNode) && - //safari的contains有bug - (browser.safari ? !(domUtils.getPosition(tmpNode,excludeNode) & domUtils.POSITION_CONTAINS) : !tmpNode.contains(excludeNode)) - ) { - fillData = tmpNode.parentNode; - domUtils.remove(tmpNode); - tmpNode = fillData; - } - } else { - fillData.nodeValue = fillData.nodeValue.replace(fillCharReg, ''); - } - } - } catch (e) { - } - } - - /** - * @param node - * @param dir - */ - function mergeSibling(node, dir) { - var tmpNode; - node = node[dir]; - while (node && domUtils.isFillChar(node)) { - tmpNode = node[dir]; - domUtils.remove(node); - node = tmpNode; - } - } - - Range.prototype = { - - /** - * 克隆选区的内容到一个DocumentFragment里 - * @method cloneContents - * @return { DocumentFragment | NULL } 如果选区是闭合的将返回null， 否则， 返回包含所clone内容的DocumentFragment元素 - * @example - * ```html - * - * - * xx[xxx]x - * - * - * - * ``` - */ - cloneContents:function () { - return this.collapsed ? null : execContentsAction(this, 0); + } : function (node) { + node.style.MozUserSelect = + node.style.webkitUserSelect = + node.style.msUserSelect = + node.style.KhtmlUserSelect = 'none'; }, - /** - * 删除当前选区范围中的所有内容 - * @method deleteContents - * @remind 执行完该操作后， 当前Range对象变成了闭合状态 - * @return { UE.dom.Range } 当前操作的Range对象 + * 删除节点node上的指定属性名称的属性 + * @method removeAttributes + * @param { Node } node 需要删除属性的节点对象 + * @param { String } attrNames 可以是空格隔开的多个属性名称，该操作将会依次删除相应的属性 * @example * ```html - * - * - * xx[xxx]x - * - * - * - * ``` - */ - deleteContents:function () { - var txt; - if (!this.collapsed) { - execContentsAction(this, 1); - } - if (browser.webkit) { - txt = this.startContainer; - if (txt.nodeType == 3 && !txt.nodeValue.length) { - this.setStartBefore(txt).collapse(true); - domUtils.remove(txt); - } - } - return this; - }, - - /** - * 将当前选区的内容提取到一个DocumentFragment里 - * @method extractContents - * @remind 执行该操作后， 选区将变成闭合状态 - * @warning 执行该操作后， 原来选区所选中的内容将从dom树上剥离出来 - * @return { DocumentFragment } 返回包含所提取内容的DocumentFragment对象 - * @example - * ```html - * - * - * xx[xxx]x - * - * - * - */ - extractContents:function () { - return this.collapsed ? null : execContentsAction(this, 2); - }, - - /** - * 设置Range的开始容器节点和偏移量 - * @method setStart - * @remind 如果给定的节点是元素节点，那么offset指的是其子元素中索引为offset的元素， - * 如果是文本节点，那么offset指的是其文本内容的第offset个字符 - * @remind 如果提供的容器节点是一个不能包含子元素的节点， 则该选区的开始容器将被设置 - * 为该节点的父节点， 此时， 其距离开始容器的偏移量也变成了该节点在其父节点 - * 中的索引 - * @param { Node } node 将被设为当前选区开始边界容器的节点对象 - * @param { int } offset 选区的开始位置偏移量 - * @return { UE.dom.Range } 当前range对象 - * @example - * ```html - * - * xxxxxxxxxxxxx[xxx] + *
+ * xxxxx
+ *
*
*
- * ```
- * @example
- * ```html
- *
- * xxx
+ * xxxxx
+ *
*
*
* ```
*/
- collapse:function (toStart) {
- var me = this;
- if (toStart) {
- me.endContainer = me.startContainer;
- me.endOffset = me.startOffset;
- } else {
- me.startContainer = me.endContainer;
- me.startOffset = me.endOffset;
- }
- me.collapsed = true;
- return me;
- },
-
- /**
- * 调整range的开始位置和结束位置，使其"收缩"到最小的位置
- * @method shrinkBoundary
- * @return { UE.dom.Range } 当前range对象
- * @example
- * ```html
- * xxxx[xxxxx] => xxxx[xxxxx]
- * ```
- *
- * @example
- * ```html
- *
- * x[xx]xxx
- *
- *
- * ```
- *
- * @example
- * ```html
- * [xxxxxxxxxxx] => [xxxxxxxxxxx]
- * ```
- */
-
- /**
- * 调整range的开始位置和结束位置，使其"收缩"到最小的位置，
- * 如果ignoreEnd的值为true，则忽略对结束位置的调整
- * @method shrinkBoundary
- * @param { Boolean } ignoreEnd 是否忽略对结束位置的调整
- * @return { UE.dom.Range } 当前range对象
- * @see UE.dom.domUtils.Range:shrinkBoundary()
- */
- shrinkBoundary:function (ignoreEnd) {
- var me = this, child,
- collapsed = me.collapsed;
- function check(node){
- return node.nodeType == 1 && !domUtils.isBookmarkNode(node) && !dtd.$empty[node.tagName] && !dtd.$nonChild[node.tagName]
- }
- while (me.startContainer.nodeType == 1 //是element
- && (child = me.startContainer.childNodes[me.startOffset]) //子节点也是element
- && check(child)) {
- me.setStart(child, 0);
- }
- if (collapsed) {
- return me.collapse(true);
- }
- if (!ignoreEnd) {
- while (me.endContainer.nodeType == 1//是element
- && me.endOffset > 0 //如果是空元素就退出 endOffset=0那么endOffst-1为负值，childNodes[endOffset]报错
- && (child = me.endContainer.childNodes[me.endOffset - 1]) //子节点也是element
- && check(child)) {
- me.setEnd(child, child.childNodes.length);
- }
- }
- return me;
- },
-
- /**
- * 获取离当前选区内包含的所有节点最近的公共祖先节点，
- * @method getCommonAncestor
- * @remind 返回的公共祖先节点一定不是range自身的容器节点， 但有可能是一个文本节点
- * @return { Node } 当前range对象内所有节点的公共祖先节点
- * @example
- * ```html
- * //选区示例
- * xxxx[xxx]xxxxxx
- *
- * ```
- */
-
- /**
- * 获取当前选区所包含的所有节点的公共祖先节点， 可以根据给定的参数 includeSelf 决定获取到
- * 的公共祖先节点是否可以是当前选区的startContainer或endContainer节点， 如果 includeSelf
- * 的取值为true， 则返回的节点可以是自身的容器节点， 否则， 则不能是容器节点
- * @method getCommonAncestor
- * @param { Boolean } includeSelf 是否允许获取到的公共祖先节点是当前range对象的容器节点
- * @return { Node } 当前range对象内所有节点的公共祖先节点
- * @see UE.dom.Range:getCommonAncestor()
- * @example
- * ```html
- *
- *
- *
- * xxxxxxxxx[xxx]xxxxxxxx
- *
- *
- *
- *
- * ```
- */
-
- /**
- * 获取当前选区所包含的所有节点的公共祖先节点， 可以根据给定的参数 includeSelf 决定获取到
- * 的公共祖先节点是否可以是当前选区的startContainer或endContainer节点， 如果 includeSelf
- * 的取值为true， 则返回的节点可以是自身的容器节点， 否则， 则不能是容器节点； 同时可以根据
- * ignoreTextNode 参数的取值决定是否忽略类型为文本节点的祖先节点。
- * @method getCommonAncestor
- * @param { Boolean } includeSelf 是否允许获取到的公共祖先节点是当前range对象的容器节点
- * @param { Boolean } ignoreTextNode 获取祖先节点的过程中是否忽略类型为文本节点的祖先节点
- * @return { Node } 当前range对象内所有节点的公共祖先节点
- * @see UE.dom.Range:getCommonAncestor()
- * @see UE.dom.Range:getCommonAncestor(Boolean)
- * @example
- * ```html
- *
- *
- *
- * xxxxxxxx[x]xxxxxxxxxxx
- *
- *
- *
- *
- * ```
- */
- getCommonAncestor:function (includeSelf, ignoreTextNode) {
- var me = this,
- start = me.startContainer,
- end = me.endContainer;
- if (start === end) {
- if (includeSelf && selectOneNode(this)) {
- start = start.childNodes[me.startOffset];
- if(start.nodeType == 1)
- return start;
- }
- //只有在上来就相等的情况下才会出现是文本的情况
- return ignoreTextNode && start.nodeType == 3 ? start.parentNode : start;
- }
- return domUtils.getCommonAncestor(start, end);
- },
-
- /**
- * 调整当前Range的开始和结束边界容器，如果是容器节点是文本节点,就调整到包含该文本节点的父节点上
- * @method trimBoundary
- * @remind 该操作有可能会引起文本节点被切开
- * @return { UE.dom.Range } 当前range对象
- * @example
- * ```html
- *
- * //选区示例
- * xxx[xxxxx]xxx
- *
- *
- * ```
- */
-
- /**
- * 调整当前Range的开始和结束边界容器，如果是容器节点是文本节点,就调整到包含该文本节点的父节点上，
- * 可以根据 ignoreEnd 参数的值决定是否调整对结束边界的调整
- * @method trimBoundary
- * @param { Boolean } ignoreEnd 是否忽略对结束边界的调整
- * @return { UE.dom.Range } 当前range对象
- * @example
- * ```html
- *
- * //选区示例
- * xxx[xxxxx]xxx
- *
- *
- * ```
- */
- trimBoundary:function (ignoreEnd) {
- this.txtToElmBoundary();
- var start = this.startContainer,
- offset = this.startOffset,
- collapsed = this.collapsed,
- end = this.endContainer;
- if (start.nodeType == 3) {
- if (offset == 0) {
- this.setStartBefore(start);
- } else {
- if (offset >= start.nodeValue.length) {
- this.setStartAfter(start);
- } else {
- var textNode = domUtils.split(start, offset);
- //跟新结束边界
- if (start === end) {
- this.setEnd(textNode, this.endOffset - offset);
- } else if (start.parentNode === end) {
- this.endOffset += 1;
- }
- this.setStartBefore(textNode);
- }
- }
- if (collapsed) {
- return this.collapse(true);
- }
- }
- if (!ignoreEnd) {
- offset = this.endOffset;
- end = this.endContainer;
- if (end.nodeType == 3) {
- if (offset == 0) {
- this.setEndBefore(end);
- } else {
- offset < end.nodeValue.length && domUtils.split(end, offset);
- this.setEndAfter(end);
- }
- }
- }
- return this;
- },
-
- /**
- * 如果选区在文本的边界上，就扩展选区到文本的父节点上, 如果当前选区是闭合的， 则什么也不做
- * @method txtToElmBoundary
- * @remind 该操作不会修改dom节点
- * @return { UE.dom.Range } 当前range对象
- */
-
- /**
- * 如果选区在文本的边界上，就扩展选区到文本的父节点上, 如果当前选区是闭合的， 则根据参数项
- * ignoreCollapsed 的值决定是否执行该调整
- * @method txtToElmBoundary
- * @param { Boolean } ignoreCollapsed 是否忽略选区的闭合状态， 如果该参数取值为true， 则
- * 不论选区是否闭合， 都会执行该操作， 反之， 则不会对闭合的选区执行该操作
- * @return { UE.dom.Range } 当前range对象
- */
- txtToElmBoundary:function (ignoreCollapsed) {
- function adjust(r, c) {
- var container = r[c + 'Container'],
- offset = r[c + 'Offset'];
- if (container.nodeType == 3) {
- if (!offset) {
- r['set' + c.replace(/(\w)/, function (a) {
- return a.toUpperCase();
- }) + 'Before'](container);
- } else if (offset >= container.nodeValue.length) {
- r['set' + c.replace(/(\w)/, function (a) {
- return a.toUpperCase();
- }) + 'After' ](container);
- }
- }
- }
-
- if (ignoreCollapsed || !this.collapsed) {
- adjust(this, 'start');
- adjust(this, 'end');
- }
- return this;
- },
-
- /**
- * 在当前选区的开始位置前插入节点，新插入的节点会被该range包含
- * @method insertNode
- * @param { Node } node 需要插入的节点
- * @remind 插入的节点可以是一个DocumentFragment依次插入多个节点
- * @return { UE.dom.Range } 当前range对象
- */
- insertNode:function (node) {
- var first = node, length = 1;
- if (node.nodeType == 11) {
- first = node.firstChild;
- length = node.childNodes.length;
- }
- this.trimBoundary(true);
- var start = this.startContainer,
- offset = this.startOffset;
- var nextNode = start.childNodes[ offset ];
- if (nextNode) {
- start.insertBefore(node, nextNode);
- } else {
- start.appendChild(node);
- }
- if (first.parentNode === this.endContainer) {
- this.endOffset = this.endOffset + length;
- }
- return this.setStartBefore(first);
- },
-
- /**
- * 闭合选区到当前选区的开始位置， 并且定位光标到闭合后的位置
- * @method setCursor
- * @return { UE.dom.Range } 当前range对象
- * @see UE.dom.Range:collapse()
- */
-
- /**
- * 闭合选区，可以根据参数toEnd的值控制选区是向前闭合还是向后闭合， 并且定位光标到闭合后的位置。
- * @method setCursor
- * @param { Boolean } toEnd 是否向后闭合， 如果为true， 则闭合选区时， 将向结束容器方向闭合，
- * 反之，则向开始容器方向闭合
- * @return { UE.dom.Range } 当前range对象
- * @see UE.dom.Range:collapse(Boolean)
- */
- setCursor:function (toEnd, noFillData) {
- return this.collapse(!toEnd).select(noFillData);
- },
-
- /**
- * 创建当前range的一个书签，记录下当前range的位置，方便当dom树改变时，还能找回原来的选区位置
- * @method createBookmark
- * @param { Boolean } serialize 控制返回的标记位置是对当前位置的引用还是ID，如果该值为true，则
- * 返回标记位置的ID， 反之则返回标记位置节点的引用
- * @return { Object } 返回一个书签记录键值对， 其包含的key有： start => 开始标记的ID或者引用，
- * end => 结束标记的ID或引用， id => 当前标记的类型， 如果为true，则表示
- * 返回的记录的类型为ID， 反之则为引用
- */
- createBookmark:function (serialize, same) {
- var endNode,
- startNode = this.document.createElement('span');
- startNode.style.cssText = 'display:none;line-height:0px;';
- startNode.appendChild(this.document.createTextNode('\u200D'));
- startNode.id = '_baidu_bookmark_start_' + (same ? '' : guid++);
-
- if (!this.collapsed) {
- endNode = startNode.cloneNode(true);
- endNode.id = '_baidu_bookmark_end_' + (same ? '' : guid++);
- }
- this.insertNode(startNode);
- if (endNode) {
- this.collapse().insertNode(endNode).setEndBefore(endNode);
- }
- this.setStartAfter(startNode);
- return {
- start:serialize ? startNode.id : startNode,
- end:endNode ? serialize ? endNode.id : endNode : null,
- id:serialize
- }
- },
-
- /**
- * 调整当前range的边界到书签位置，并删除该书签对象所标记的位置内的节点
- * @method moveToBookmark
- * @param { BookMark } bookmark createBookmark所创建的标签对象
- * @return { UE.dom.Range } 当前range对象
- * @see UE.dom.Range:createBookmark(Boolean)
- */
- moveToBookmark:function (bookmark) {
- var start = bookmark.id ? this.document.getElementById(bookmark.start) : bookmark.start,
- end = bookmark.end && bookmark.id ? this.document.getElementById(bookmark.end) : bookmark.end;
- this.setStartBefore(start);
- domUtils.remove(start);
- if (end) {
- this.setEndBefore(end);
- domUtils.remove(end);
- } else {
- this.collapse(true);
- }
- return this;
- },
-
- /**
- * 调整range的边界，使其"放大"到最近的父节点
- * @method enlarge
- * @remind 会引起选区的变化
- * @return { UE.dom.Range } 当前range对象
- */
-
- /**
- * 调整range的边界，使其"放大"到最近的父节点，根据参数 toBlock 的取值， 可以
- * 要求扩大之后的父节点是block节点
- * @method enlarge
- * @param { Boolean } toBlock 是否要求扩大之后的父节点必须是block节点
- * @return { UE.dom.Range } 当前range对象
- */
- enlarge:function (toBlock, stopFn) {
- var isBody = domUtils.isBody,
- pre, node, tmp = this.document.createTextNode('');
- if (toBlock) {
- node = this.startContainer;
- if (node.nodeType == 1) {
- if (node.childNodes[this.startOffset]) {
- pre = node = node.childNodes[this.startOffset]
- } else {
- node.appendChild(tmp);
- pre = node = tmp;
- }
- } else {
- pre = node;
- }
- while (1) {
- if (domUtils.isBlockElm(node)) {
- node = pre;
- while ((pre = node.previousSibling) && !domUtils.isBlockElm(pre)) {
- node = pre;
- }
- this.setStartBefore(node);
+ removeAttributes: function (node, attrNames) {
+ attrNames = utils.isArray(attrNames) ? attrNames : utils.trim(attrNames).replace(/[ ]{2,}/g, ' ').split(' ');
+ for (var i = 0, ci; ci = attrNames[i++];) {
+ ci = attrFix[ci] || ci;
+ switch (ci) {
+ case 'className':
+ node[ci] = '';
break;
- }
- pre = node;
- node = node.parentNode;
+ case 'style':
+ node.style.cssText = '';
+ var val = node.getAttributeNode('style');
+ !browser.ie && val && node.removeAttributeNode(val);
}
- node = this.endContainer;
- if (node.nodeType == 1) {
- if (pre = node.childNodes[this.endOffset]) {
- node.insertBefore(tmp, pre);
- } else {
- node.appendChild(tmp);
- }
- pre = node = tmp;
- } else {
- pre = node;
- }
- while (1) {
- if (domUtils.isBlockElm(node)) {
- node = pre;
- while ((pre = node.nextSibling) && !domUtils.isBlockElm(pre)) {
- node = pre;
- }
- this.setEndAfter(node);
- break;
- }
- pre = node;
- node = node.parentNode;
- }
- if (tmp.parentNode === this.endContainer) {
- this.endOffset--;
- }
- domUtils.remove(tmp);
+ node.removeAttribute(ci);
}
-
- // 扩展边界到最大
- if (!this.collapsed) {
- while (this.startOffset == 0) {
- if (stopFn && stopFn(this.startContainer)) {
- break;
- }
- if (isBody(this.startContainer)) {
- break;
- }
- this.setStartBefore(this.startContainer);
- }
- while (this.endOffset == (this.endContainer.nodeType == 1 ? this.endContainer.childNodes.length : this.endContainer.nodeValue.length)) {
- if (stopFn && stopFn(this.endContainer)) {
- break;
- }
- if (isBody(this.endContainer)) {
- break;
- }
- this.setEndAfter(this.endContainer);
- }
- }
- return this;
- },
- enlargeToBlockElm:function(ignoreEnd){
- while(!domUtils.isBlockElm(this.startContainer)){
- this.setStartBefore(this.startContainer);
- }
- if(!ignoreEnd){
- while(!domUtils.isBlockElm(this.endContainer)){
- this.setEndAfter(this.endContainer);
- }
- }
- return this;
},
/**
- * 调整Range的边界，使其"缩小"到最合适的位置
- * @method adjustmentBoundary
- * @return { UE.dom.Range } 当前range对象
- * @see UE.dom.Range:shrinkBoundary()
- */
- adjustmentBoundary:function () {
- if (!this.collapsed) {
- while (!domUtils.isBody(this.startContainer) &&
- this.startOffset == this.startContainer[this.startContainer.nodeType == 3 ? 'nodeValue' : 'childNodes'].length &&
- this.startContainer[this.startContainer.nodeType == 3 ? 'nodeValue' : 'childNodes'].length
- ) {
-
- this.setStartAfter(this.startContainer);
- }
- while (!domUtils.isBody(this.endContainer) && !this.endOffset &&
- this.endContainer[this.endContainer.nodeType == 3 ? 'nodeValue' : 'childNodes'].length
- ) {
- this.setEndBefore(this.endContainer);
- }
- }
- return this;
- },
-
- /**
- * 给range选区中的内容添加给定的inline标签
- * @method applyInlineStyle
- * @param { String } tagName 需要添加的标签名
+ * 在doc下创建一个标签名为tag，属性为attrs的元素
+ * @method createElement
+ * @param { DomDocument } doc 新创建的元素属于该document节点创建
+ * @param { String } tagName 需要创建的元素的标签名
+ * @param { Object } attrs 新创建的元素的属性key-value集合
+ * @return { Element } 新创建的元素对象
* @example
- * ```html
- * xxxx[xxxx]x
==> range.applyInlineStyle("strong") ==>xxxx[xxxx]x
+ * ```javascript + * var ele = UE.dom.domUtils.createElement( document, 'div', { + * id: 'test' + * } ); + * + * //output: DIV + * console.log( ele.tagName ); + * + * //output: test + * console.log( ele.id ); + * * ``` */ - + createElement: function (doc, tag, attrs) { + return domUtils.setAttributes(doc.createElement(tag), attrs) + }, /** - * 给range选区中的内容添加给定的inline标签， 并且为标签附加上一些初始化属性。 - * @method applyInlineStyle - * @param { String } tagName 需要添加的标签名 - * @param { Object } attrs 跟随新添加的标签的属性 - * @return { UE.dom.Range } 当前选区 + * 为节点node添加属性attrs，attrs为属性键值对 + * @method setAttributes + * @param { Element } node 需要设置属性的元素对象 + * @param { Object } attrs 需要设置的属性名-值对 + * @return { Element } 设置属性的元素对象 * @example * ```html - *xxxx[xxxx]x
+ * * - * ==> + * * - *xxxx[xxxx]x
- * ``` */ - applyInlineStyle:function (tagName, attrs, list) { - if (this.collapsed)return this; - this.trimBoundary().enlarge(false, - function (node) { - return node.nodeType == 1 && domUtils.isBlockElm(node) - }).adjustmentBoundary(); - var bookmark = this.createBookmark(), - end = bookmark.end, - filterFn = function (node) { - return node.nodeType == 1 ? node.tagName.toLowerCase() != 'br' : !domUtils.isWhitespace(node); - }, - current = domUtils.getNextDomNode(bookmark.start, false, filterFn), - node, - pre, - range = this.cloneRange(); - while (current && (domUtils.getPosition(current, end) & domUtils.POSITION_PRECEDING)) { - if (current.nodeType == 3 || dtd[tagName][current.tagName]) { - range.setStartBefore(current); - node = current; - while (node && (node.nodeType == 3 || dtd[tagName][node.tagName]) && node !== end) { - pre = node; - node = domUtils.getNextDomNode(node, node.nodeType == 1, null, function (parent) { - return dtd[tagName][parent.tagName]; - }); - } - var frag = range.setEndAfter(pre).extractContents(), elm; - if (list && list.length > 0) { - var level, top; - top = level = list[0].cloneNode(false); - for (var i = 1, ci; ci = list[i++];) { - level.appendChild(ci.cloneNode(false)); - level = level.firstChild; - } - elm = level; - } else { - elm = range.document.createElement(tagName); - } - if (attrs) { - domUtils.setAttributes(elm, attrs); - } - elm.appendChild(frag); - range.insertNode(list ? top : elm); - //处理下滑线在a上的情况 - var aNode; - if (tagName == 'span' && attrs.style && /text\-decoration/.test(attrs.style) && (aNode = domUtils.findParentByTagName(elm, 'a', true))) { - domUtils.setAttributes(aNode, attrs); - domUtils.remove(elm, true); - elm = aNode; - } else { - domUtils.mergeSibling(elm); - domUtils.clearEmptySibling(elm); - } - //去除子节点相同的 - domUtils.mergeChild(elm, attrs); - current = domUtils.getNextDomNode(elm, false, filterFn); - domUtils.mergeToParent(elm); - if (node === end) { - break; - } - } else { - current = domUtils.getNextDomNode(current, true, filterFn); - } - } - return this.moveToBookmark(bookmark); - }, - - /** - * 移除当前选区内指定的inline标签，但保留其中的内容 - * @method removeInlineStyle - * @param { String } tagName 需要移除的标签名 - * @return { UE.dom.Range } 当前的range对象 - * @example - * ```html - * xx[xxxxyyyzz]z => range.removeInlineStyle(["em"]) => xx[xxxxyyyzz]z - * ``` - */ - - /** - * 移除当前选区内指定的一组inline标签，但保留其中的内容 - * @method removeInlineStyle - * @param { Array } tagNameArr 需要移除的标签名的数组 - * @return { UE.dom.Range } 当前的range对象 - * @see UE.dom.Range:removeInlineStyle(String) - */ - removeInlineStyle:function (tagNames) { - if (this.collapsed)return this; - tagNames = utils.isArray(tagNames) ? tagNames : [tagNames]; - this.shrinkBoundary().adjustmentBoundary(); - var start = this.startContainer, end = this.endContainer; - while (1) { - if (start.nodeType == 1) { - if (utils.indexOf(tagNames, start.tagName.toLowerCase()) > -1) { - break; - } - if (start.tagName.toLowerCase() == 'body') { - start = null; - break; - } - } - start = start.parentNode; - } - while (1) { - if (end.nodeType == 1) { - if (utils.indexOf(tagNames, end.tagName.toLowerCase()) > -1) { - break; - } - if (end.tagName.toLowerCase() == 'body') { - end = null; - break; - } - } - end = end.parentNode; - } - var bookmark = this.createBookmark(), - frag, - tmpRange; - if (start) { - tmpRange = this.cloneRange().setEndBefore(bookmark.start).setStartBefore(start); - frag = tmpRange.extractContents(); - tmpRange.insertNode(frag); - domUtils.clearEmptySibling(start, true); - start.parentNode.insertBefore(bookmark.start, start); - } - if (end) { - tmpRange = this.cloneRange().setStartAfter(bookmark.end).setEndAfter(end); - frag = tmpRange.extractContents(); - tmpRange.insertNode(frag); - domUtils.clearEmptySibling(end, false, true); - end.parentNode.insertBefore(bookmark.end, end.nextSibling); - } - var current = domUtils.getNextDomNode(bookmark.start, false, function (node) { - return node.nodeType == 1; - }), next; - while (current && current !== bookmark.end) { - next = domUtils.getNextDomNode(current, true, function (node) { - return node.nodeType == 1; - }); - if (utils.indexOf(tagNames, current.tagName.toLowerCase()) > -1) { - domUtils.remove(current, true); - } - current = next; - } - return this.moveToBookmark(bookmark); - }, - - /** - * 获取当前选中的自闭合的节点 - * @method getClosedNode - * @return { Node | NULL } 如果当前选中的是自闭合节点， 则返回该节点， 否则返回NULL - */ - getClosedNode:function () { - var node; - if (!this.collapsed) { - var range = this.cloneRange().adjustmentBoundary().shrinkBoundary(); - if (selectOneNode(range)) { - var child = range.startContainer.childNodes[range.startOffset]; - if (child && child.nodeType == 1 && (dtd.$empty[child.tagName] || dtd.$nonChild[child.tagName])) { - node = child; + setAttributes: function (node, attrs) { + for (var attr in attrs) { + if (attrs.hasOwnProperty(attr)) { + var value = attrs[attr]; + switch (attr) { + case 'class': + //ie下要这样赋值，setAttribute不起作用 + node.className = value; + break; + case 'style' : + node.style.cssText = node.style.cssText + ";" + value; + break; + case 'innerHTML': + node[attr] = value; + break; + case 'value': + node.value = value; + break; + default: + node.setAttribute(attrFix[attr] || attr, value); } } } @@ -5658,2835 +3560,5195 @@ var fillCharReg = new RegExp(domUtils.fillChar, 'g'); }, /** - * 在页面上高亮range所表示的选区 - * @method select - * @return { UE.dom.Range } 返回当前Range对象 + * 获取元素element经过计算后的样式值 + * @method getComputedStyle + * @param { Element } element 需要获取样式的元素对象 + * @param { String } styleName 需要获取的样式名 + * @return { String } 获取到的样式值 + * @example + * ```html + * + * + * + * + * + * ``` */ - //这里不区分ie9以上，trace:3824 - select:browser.ie ? function (noFillData, textRange) { - var nativeRange; - if (!this.collapsed) - this.shrinkBoundary(); - var node = this.getClosedNode(); - if (node && !textRange) { - try { - nativeRange = this.document.body.createControlRange(); - nativeRange.addElement(node); - nativeRange.select(); - } catch (e) {} - return this; + getComputedStyle: function (element, styleName) { + //一下的属性单独处理 + var pros = 'width height top left'; + + if (pros.indexOf(styleName) > -1) { + return element['offset' + styleName.replace(/^\w/, function (s) { + return s.toUpperCase() + })] + 'px'; } - var bookmark = this.createBookmark(), - start = bookmark.start, - end; - nativeRange = this.document.body.createTextRange(); - nativeRange.moveToElementText(start); - nativeRange.moveStart('character', 1); - if (!this.collapsed) { - var nativeRangeEnd = this.document.body.createTextRange(); - end = bookmark.end; - nativeRangeEnd.moveToElementText(end); - nativeRange.setEndPoint('EndToEnd', nativeRangeEnd); + //忽略文本节点 + if (element.nodeType == 3) { + element = element.parentNode; + } + //ie下font-size若body下定义了font-size，则从currentStyle里会取到这个font-size. 取不到实际值，故此修改. + if (browser.ie && browser.version < 9 && styleName == 'font-size' && !element.style.fontSize && + !dtd.$empty[element.tagName] && !dtd.$nonChild[element.tagName]) { + var span = element.ownerDocument.createElement('span'); + span.style.cssText = 'padding:0;border:0;font-family:simsun;'; + span.innerHTML = '.'; + element.appendChild(span); + var result = span.offsetHeight; + element.removeChild(span); + span = null; + return result + 'px'; + } + try { + var value = domUtils.getStyle(element, styleName) || + (window.getComputedStyle ? domUtils.getWindow(element).getComputedStyle(element, '').getPropertyValue(styleName) : + (element.currentStyle || element.style)[utils.cssStyleToDomStyle(styleName)]); + + } catch (e) { + return ""; + } + return utils.transUnitToPx(utils.fixColor(styleName, value)); + }, + /** + * 删除元素element指定的className + * @method removeClasses + * @param { Element } ele 需要删除class的元素节点 + * @param { String } classNames 需要删除的className， 多个className之间以空格分开 + * @example + * ```html + * xxx + * + * + * ``` + */ + + /** + * 删除元素element指定的className + * @method removeClasses + * @param { Element } ele 需要删除class的元素节点 + * @param { Array } classNames 需要删除的className数组 + * @example + * ```html + * xxx + * + * + * ``` + */ + removeClasses: function (elm, classNames) { + classNames = utils.isArray(classNames) ? classNames : + utils.trim(classNames).replace(/[ ]{2,}/g, ' ').split(' '); + for (var i = 0, ci, cls = elm.className; ci = classNames[i++];) { + cls = cls.replace(new RegExp('\\b' + ci + '\\b'), '') + } + cls = utils.trim(cls).replace(/[ ]{2,}/g, ' '); + if (cls) { + elm.className = cls; } else { - if (!noFillData && this.startContainer.nodeType != 3) { - //使用|x固定住光标 - var tmpText = this.document.createTextNode(fillChar), - tmp = this.document.createElement('span'); - tmp.appendChild(this.document.createTextNode(fillChar)); - start.parentNode.insertBefore(tmp, start); - start.parentNode.insertBefore(tmpText, start); - //当点b,i,u时，不能清除i上边的b - removeFillData(this.document, tmpText); - fillData = tmpText; - mergeSibling(tmp, 'previousSibling'); - mergeSibling(start, 'nextSibling'); - nativeRange.moveStart('character', -1); - nativeRange.collapse(true); + domUtils.removeAttributes(elm, ['class']); + } + }, + /** + * 给元素element添加className + * @method addClass + * @param { Node } ele 需要增加className的元素 + * @param { String } classNames 需要添加的className， 多个className之间以空格分割 + * @remind 相同的类名不会被重复添加 + * @example + * ```html + * + * + * + * ``` + */ - function check(node,offset,dir){ - if(node.nodeType == 3 && node.nodeValue.length < offset){ - rng[dir + 'Offset'] = node.nodeValue.length + /** + * 判断元素element是否包含给定的样式类名className + * @method hasClass + * @param { Node } ele 需要检测的元素 + * @param { Array } classNames 需要检测的className数组 + * @return { Boolean } 元素是否包含所有给定的className + * @example + * ```html + * + * + * + * ``` + */ + hasClass: function (element, className) { + if (utils.isRegExp(className)) { + return className.test(element.className) + } + className = utils.trim(className).replace(/[ ]{2,}/g, ' ').split(' '); + for (var i = 0, ci, cls = element.className; ci = className[i++];) { + if (!new RegExp('\\b' + ci + '\\b', 'i').test(cls)) { + return false; + } + } + return i - 1 == className.length; + }, + + /** + * 阻止事件默认行为 + * @method preventDefault + * @param { Event } evt 需要阻止默认行为的事件对象 + * @example + * ```javascript + * UE.dom.domUtils.preventDefault( evt ); + * ``` + */ + preventDefault: function (evt) { + evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false); + }, + /** + * 删除元素element指定的样式 + * @method removeStyle + * @param { Element } element 需要删除样式的元素 + * @param { String } styleName 需要删除的样式名 + * @example + * ```html + * + * + * + * ``` + */ + removeStyle: function (element, name) { + if (browser.ie) { + //针对color先单独处理一下 + if (name == 'color') { + name = '(^|;)' + name; + } + element.style.cssText = element.style.cssText.replace(new RegExp(name + '[^:]*:[^;]+;?', 'ig'), '') + } else { + if (element.style.removeProperty) { + element.style.removeProperty(name); + } else { + element.style.removeAttribute(utils.cssStyleToDomStyle(name)); + } + } + + + if (!element.style.cssText) { + domUtils.removeAttributes(element, ['style']); + } + }, + /** + * 获取元素element的style属性的指定值 + * @method getStyle + * @param { Element } element 需要获取属性值的元素 + * @param { String } styleName 需要获取的style的名称 + * @warning 该方法仅获取元素style属性中所标明的值 + * @return { String } 该元素包含指定的style属性值 + * @example + * ```html + * + * + * + * ``` + */ + getStyle: function (element, name) { + var value = element.style[utils.cssStyleToDomStyle(name)]; + return utils.fixColor(name, value); + }, + /** + * 为元素element设置样式属性值 + * @method setStyle + * @param { Element } element 需要设置样式的元素 + * @param { String } styleName 样式名 + * @param { String } styleValue 样式值 + * @example + * ```html + * + * + * + * ``` + */ + setStyle: function (element, name, value) { + element.style[utils.cssStyleToDomStyle(name)] = value; + if (!utils.trim(element.style.cssText)) { + this.removeAttributes(element, 'style') + } + }, + /** + * 为元素element设置多个样式属性值 + * @method setStyles + * @param { Element } element 需要设置样式的元素 + * @param { Object } styles 样式名值对 + * @example + * ```html + * + * + * + * ``` + */ + setStyles: function (element, styles) { + for (var name in styles) { + if (styles.hasOwnProperty(name)) { + domUtils.setStyle(element, name, styles[name]); + } + } + }, + /** + * 删除_moz_dirty属性 + * @private + * @method removeDirtyAttr + */ + removeDirtyAttr: function (node) { + for (var i = 0, ci, nodes = node.getElementsByTagName('*'); ci = nodes[i++];) { + ci.removeAttribute('_moz_dirty'); + } + node.removeAttribute('_moz_dirty'); + }, + /** + * 获取子节点的数量 + * @method getChildCount + * @param { Element } node 需要检测的元素 + * @return { Number } 给定的node元素的子节点数量 + * @example + * ```html + *
+ *
+ *
+ *
+ *
+ * ```
+ */
+
+ /**
+ * 根据给定的过滤规则， 获取符合条件的子节点的数量
+ * @method getChildCount
+ * @param { Element } node 需要检测的元素
+ * @param { Function } fn 过滤器， 要求对符合条件的子节点返回true， 反之则要求返回false
+ * @return { Number } 符合过滤条件的node元素的子节点数量
+ * @example
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ * ```
+ */
+ getChildCount: function (node, fn) {
+ var count = 0, first = node.firstChild;
+ fn = fn || function () {
+ return 1;
+ };
+ while (first) {
+ if (fn(first)) {
+ count++;
+ }
+ first = first.nextSibling;
+ }
+ return count;
+ },
+
+ /**
+ * 判断给定节点是否为空节点
+ * @method isEmptyNode
+ * @param { Node } node 需要检测的节点对象
+ * @return { Boolean } 节点是否为空
+ * @example
+ * ```javascript
+ * UE.dom.domUtils.isEmptyNode( document.body );
+ * ```
+ */
+ isEmptyNode: function (node) {
+ return !node.firstChild || domUtils.getChildCount(node, function (node) {
+ return !domUtils.isBr(node) && !domUtils.isBookmarkNode(node) && !domUtils.isWhitespace(node)
+ }) == 0
+ },
+ clearSelectedArr: function (nodes) {
+ var node;
+ while (node = nodes.pop()) {
+ domUtils.removeAttributes(node, ['class']);
+ }
+ },
+ /**
+ * 将显示区域滚动到指定节点的位置
+ * @method scrollToView
+ * @param {Node} node 节点
+ * @param {window} win window对象
+ * @param {Number} offsetTop 距离上方的偏移量
+ */
+ scrollToView: function (node, win, offsetTop) {
+ var getViewPaneSize = function () {
+ var doc = win.document,
+ mode = doc.compatMode == 'CSS1Compat';
+ return {
+ width: (mode ? doc.documentElement.clientWidth : doc.body.clientWidth) || 0,
+ height: (mode ? doc.documentElement.clientHeight : doc.body.clientHeight) || 0
+ };
+ },
+ getScrollPosition = function (win) {
+ if ('pageXOffset' in win) {
+ return {
+ x: win.pageXOffset || 0,
+ y: win.pageYOffset || 0
+ };
+ } else {
+ var doc = win.document;
+ return {
+ x: doc.documentElement.scrollLeft || doc.body.scrollLeft || 0,
+ y: doc.documentElement.scrollTop || doc.body.scrollTop || 0
+ };
+ }
+ };
+ var winHeight = getViewPaneSize().height, offset = winHeight * -1 + offsetTop;
+ offset += (node.offsetHeight || 0);
+ var elementPosition = domUtils.getXY(node);
+ offset += elementPosition.y;
+ var currentScroll = getScrollPosition(win).y;
+ // offset += 50;
+ if (offset > currentScroll || offset < currentScroll - winHeight) {
+ win.scrollTo(0, offset + (offset < 0 ? -20 : 20));
+ }
+ },
+ /**
+ * 判断给定节点是否为br
+ * @method isBr
+ * @param { Node } node 需要判断的节点对象
+ * @return { Boolean } 给定的节点是否是br节点
+ */
+ isBr: function (node) {
+ return node.nodeType == 1 && node.tagName == 'BR';
+ },
+ /**
+ * 判断给定的节点是否是一个“填充”节点
+ * @private
+ * @method isFillChar
+ * @param { Node } node 需要判断的节点
+ * @param { Boolean } isInStart 是否从节点内容的开始位置匹配
+ * @returns { Boolean } 节点是否是填充节点
+ */
+ isFillChar: function (node, isInStart) {
+ if (node.nodeType != 3)
+ return false;
+ var text = node.nodeValue;
+ if (isInStart) {
+ return new RegExp('^' + domUtils.fillChar).test(text)
+ }
+ return !text.replace(new RegExp(domUtils.fillChar, 'g'), '').length
+ },
+ isStartInblock: function (range) {
+ var tmpRange = range.cloneRange(),
+ flag = 0,
+ start = tmpRange.startContainer,
+ tmp;
+ if (start.nodeType == 1 && start.childNodes[tmpRange.startOffset]) {
+ start = start.childNodes[tmpRange.startOffset];
+ var pre = start.previousSibling;
+ while (pre && domUtils.isFillChar(pre)) {
+ start = pre;
+ pre = pre.previousSibling;
+ }
+ }
+ if (this.isFillChar(start, true) && tmpRange.startOffset == 1) {
+ tmpRange.setStartBefore(start);
+ start = tmpRange.startContainer;
+ }
+
+ while (start && domUtils.isFillChar(start)) {
+ tmp = start;
+ start = start.previousSibling
+ }
+ if (tmp) {
+ tmpRange.setStartBefore(tmp);
+ start = tmpRange.startContainer;
+ }
+ if (start.nodeType == 1 && domUtils.isEmptyNode(start) && tmpRange.startOffset == 1) {
+ tmpRange.setStart(start, 0).collapse(true);
+ }
+ while (!tmpRange.startOffset) {
+ start = tmpRange.startContainer;
+ if (domUtils.isBlockElm(start) || domUtils.isBody(start)) {
+ flag = 1;
+ break;
+ }
+ var pre = tmpRange.startContainer.previousSibling,
+ tmpNode;
+ if (!pre) {
+ tmpRange.setStartBefore(tmpRange.startContainer);
+ } else {
+ while (pre && domUtils.isFillChar(pre)) {
+ tmpNode = pre;
+ pre = pre.previousSibling;
+ }
+ if (tmpNode) {
+ tmpRange.setStartBefore(tmpNode);
+ } else {
+ tmpRange.setStartBefore(tmpRange.startContainer);
}
}
- check(rng.startContainer,rng.startOffset,'start');
- check(rng.endContainer,rng.endOffset,'end');
}
- var win = domUtils.getWindow(this.document),
- sel = win.getSelection(),
- txtNode;
- //FF下关闭自动长高时滚动条在关闭dialog时会跳
- //ff下如果不body.focus将不能定位闭合光标到编辑器内
- browser.gecko ? this.document.body.focus() : win.focus();
- if (sel) {
- sel.removeAllRanges();
- // trace:870 chrome/safari后边是br对于闭合得range不能定位 所以去掉了判断
- // this.startContainer.nodeType != 3 &&! ((child = this.startContainer.childNodes[this.startOffset]) && child.nodeType == 1 && child.tagName == 'BR'
- if (this.collapsed && !notInsertFillData) {
+ return flag && !domUtils.isBody(tmpRange.startContainer) ? 1 : 0;
+ },
+
+ /**
+ * 判断给定的元素是否是一个空元素
+ * @method isEmptyBlock
+ * @param { Element } node 需要判断的元素
+ * @return { Boolean } 是否是空元素
+ * @example
+ * ```html
+ *
+ *
+ *
+ * ```
+ */
+
+ /**
+ * 根据指定的判断规则判断给定的元素是否是一个空元素
+ * @method isEmptyBlock
+ * @param { Element } node 需要判断的元素
+ * @param { RegExp } reg 对内容执行判断的正则表达式对象
+ * @return { Boolean } 是否是空元素
+ */
+ isEmptyBlock: function (node, reg) {
+ if (node.nodeType != 1)
+ return 0;
+ reg = reg || new RegExp('[ \xa0\t\r\n' + domUtils.fillChar + ']', 'g');
+
+ if (node[browser.ie ? 'innerText' : 'textContent'].replace(reg, '').length > 0) {
+ return 0;
+ }
+ for (var n in dtd.$isNotEmpty) {
+ if (node.getElementsByTagName(n).length) {
+ return 0;
+ }
+ }
+ return 1;
+ },
+
+ /**
+ * 移动元素使得该元素的位置移动指定的偏移量的距离
+ * @method setViewportOffset
+ * @param { Element } element 需要设置偏移量的元素
+ * @param { Object } offset 偏移量， 形如{ left: 100, top: 50 }的一个键值对， 表示该元素将在
+ * 现有的位置上向水平方向偏移offset.left的距离， 在竖直方向上偏移
+ * offset.top的距离
+ * @example
+ * ```html
+ *
+ *
+ *
+ * ```
+ */
+ setViewportOffset: function (element, offset) {
+ var left = parseInt(element.style.left) | 0;
+ var top = parseInt(element.style.top) | 0;
+ var rect = element.getBoundingClientRect();
+ var offsetLeft = offset.left - rect.left;
+ var offsetTop = offset.top - rect.top;
+ if (offsetLeft) {
+ element.style.left = left + offsetLeft + 'px';
+ }
+ if (offsetTop) {
+ element.style.top = top + offsetTop + 'px';
+ }
+ },
+
+ /**
+ * 用“填充字符”填充节点
+ * @method fillNode
+ * @private
+ * @param { DomDocument } doc 填充的节点所在的docment对象
+ * @param { Node } node 需要填充的节点对象
+ * @example
+ * ```html
+ *
+ *
+ *
+ * ```
+ */
+ fillNode: function (doc, node) {
+ var tmpNode = browser.ie ? doc.createTextNode(domUtils.fillChar) : doc.createElement('br');
+ node.innerHTML = '';
+ node.appendChild(tmpNode);
+ },
+
+ /**
+ * 把节点src的所有子节点追加到另一个节点tag上去
+ * @method moveChild
+ * @param { Node } src 源节点， 该节点下的所有子节点将被移除
+ * @param { Node } tag 目标节点， 从源节点移除的子节点将被追加到该节点下
+ * @example
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ```
+ */
+
+ /**
+ * 把节点src的所有子节点移动到另一个节点tag上去, 可以通过dir参数控制附加的行为是“追加”还是“插入顶部”
+ * @method moveChild
+ * @param { Node } src 源节点， 该节点下的所有子节点将被移除
+ * @param { Node } tag 目标节点， 从源节点移除的子节点将被附加到该节点下
+ * @param { Boolean } dir 附加方式， 如果为true， 则附加进去的节点将被放到目标节点的顶部， 反之，则放到末尾
+ * @example
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ```
+ */
+ moveChild: function (src, tag, dir) {
+ while (src.firstChild) {
+ if (dir && tag.firstChild) {
+ tag.insertBefore(src.lastChild, tag.firstChild);
+ } else {
+ tag.appendChild(src.firstChild);
+ }
+ }
+ },
+
+ /**
+ * 判断节点的标签上是否不存在任何属性
+ * @method hasNoAttributes
+ * @private
+ * @param { Node } node 需要检测的节点对象
+ * @return { Boolean } 节点是否不包含任何属性
+ * @example
+ * ```html
+ * xxxx
+ *
+ *
+ * ```
+ */
+ hasNoAttributes: function (node) {
+ return browser.ie ? /^<\w+\s*?>/.test(node.outerHTML) : node.attributes.length == 0;
+ },
+
+ /**
+ * 检测节点是否是UEditor所使用的辅助节点
+ * @method isCustomeNode
+ * @private
+ * @param { Node } node 需要检测的节点
+ * @remind 辅助节点是指编辑器要完成工作临时添加的节点， 在输出的时候将会从编辑器内移除， 不会影响最终的结果。
+ * @return { Boolean } 给定的节点是否是一个辅助节点
+ */
+ isCustomeNode: function (node) {
+ return node.nodeType == 1 && node.getAttribute('_ue_custom_node_');
+ },
+
+ /**
+ * 检测节点的标签是否是给定的标签
+ * @method isTagNode
+ * @param { Node } node 需要检测的节点对象
+ * @param { String } tagName 标签
+ * @return { Boolean } 节点的标签是否是给定的标签
+ * @example
+ * ```html
+ *
+ *
+ *
+ * ```
+ */
+ isTagNode: function (node, tagNames) {
+ return node.nodeType == 1 && new RegExp('\\b' + node.tagName + '\\b', 'i').test(tagNames)
+ },
+
+ /**
+ * 给定一个节点数组，在通过指定的过滤器过滤后， 获取其中满足过滤条件的第一个节点
+ * @method filterNodeList
+ * @param { Array } nodeList 需要过滤的节点数组
+ * @param { Function } fn 过滤器， 对符合条件的节点， 执行结果返回true， 反之则返回false
+ * @return { Node | NULL } 如果找到符合过滤条件的节点， 则返回该节点， 否则返回NULL
+ * @example
+ * ```javascript
+ * var divNodes = document.getElementsByTagName("div");
+ * divNodes = [].slice.call( divNodes, 0 );
+ *
+ * //output: null
+ * console.log( UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
+ * return node.tagName.toLowerCase() !== 'div';
+ * } ) );
+ * ```
+ */
+
+ /**
+ * 给定一个节点数组nodeList和一组标签名tagNames， 获取其中能够匹配标签名的节点集合中的第一个节点
+ * @method filterNodeList
+ * @param { Array } nodeList 需要过滤的节点数组
+ * @param { String } tagNames 需要匹配的标签名， 多个标签名之间用空格分割
+ * @return { Node | NULL } 如果找到标签名匹配的节点， 则返回该节点， 否则返回NULL
+ * @example
+ * ```javascript
+ * var divNodes = document.getElementsByTagName("div");
+ * divNodes = [].slice.call( divNodes, 0 );
+ *
+ * //output: null
+ * console.log( UE.dom.domUtils.filterNodeList( divNodes, 'a span' ) );
+ * ```
+ */
+
+ /**
+ * 给定一个节点数组，在通过指定的过滤器过滤后， 如果参数forAll为true， 则会返回所有满足过滤
+ * 条件的节点集合， 否则， 返回满足条件的节点集合中的第一个节点
+ * @method filterNodeList
+ * @param { Array } nodeList 需要过滤的节点数组
+ * @param { Function } fn 过滤器， 对符合条件的节点， 执行结果返回true， 反之则返回false
+ * @param { Boolean } forAll 是否返回整个节点数组, 如果该参数为false， 则返回节点集合中的第一个节点
+ * @return { Array | Node | NULL } 如果找到符合过滤条件的节点， 则根据参数forAll的值决定返回满足
+ * 过滤条件的节点数组或第一个节点， 否则返回NULL
+ * @example
+ * ```javascript
+ * var divNodes = document.getElementsByTagName("div");
+ * divNodes = [].slice.call( divNodes, 0 );
+ *
+ * //output: 3（假定有3个div）
+ * console.log( divNodes.length );
+ *
+ * var nodes = UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
+ * return node.tagName.toLowerCase() === 'div';
+ * }, true );
+ *
+ * //output: 3
+ * console.log( nodes.length );
+ *
+ * var node = UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
+ * return node.tagName.toLowerCase() === 'div';
+ * }, false );
+ *
+ * //output: div
+ * console.log( node.nodeName );
+ * ```
+ */
+ filterNodeList: function (nodelist, filter, forAll) {
+ var results = [];
+ if (!utils.isFunction(filter)) {
+ var str = filter;
+ filter = function (n) {
+ return utils.indexOf(utils.isArray(str) ? str : str.split(' '), n.tagName.toLowerCase()) != -1
+ };
+ }
+ utils.each(nodelist, function (n) {
+ filter(n) && results.push(n)
+ });
+ return results.length == 0 ? null : results.length == 1 || !forAll ? results[0] : results
+ },
+
+ /**
+ * 查询给定的range选区是否在给定的node节点内，且在该节点的最末尾
+ * @method isInNodeEndBoundary
+ * @param { UE.dom.Range } rng 需要判断的range对象， 该对象的startContainer不能为NULL
+ * @param node 需要检测的节点对象
+ * @return { Number } 如果给定的选取range对象是在node内部的最末端， 则返回1, 否则返回0
+ */
+ isInNodeEndBoundary: function (rng, node) {
+ var start = rng.startContainer;
+ if (start.nodeType == 3 && rng.startOffset != start.nodeValue.length) {
+ return 0;
+ }
+ if (start.nodeType == 1 && rng.startOffset != start.childNodes.length) {
+ return 0;
+ }
+ while (start !== node) {
+ if (start.nextSibling) {
+ return 0
+ }
+ ;
+ start = start.parentNode;
+ }
+ return 1;
+ },
+ isBoundaryNode: function (node, dir) {
+ var tmp;
+ while (!domUtils.isBody(node)) {
+ tmp = node;
+ node = node.parentNode;
+ if (tmp !== node[dir]) {
+ return false;
+ }
+ }
+ return true;
+ },
+ fillHtml: browser.ie11below ? ' ' : '' + }; + var fillCharReg = new RegExp(domUtils.fillChar, 'g'); + +// core/Range.js + /** + * Range封装 + * @file + * @module UE.dom + * @class Range + * @since 1.2.6.1 + */ + + /** + * dom操作封装 + * @unfile + * @module UE.dom + */ + + /** + * Range实现类，本类是UEditor底层核心类，封装不同浏览器之间的Range操作。 + * @unfile + * @module UE.dom + * @class Range + */ + + + (function () { + var guid = 0, + fillChar = domUtils.fillChar, + fillData; + + /** + * 更新range的collapse状态 + * @param {Range} range range对象 + */ + function updateCollapse(range) { + range.collapsed = + range.startContainer && range.endContainer && + range.startContainer === range.endContainer && + range.startOffset == range.endOffset; + } + + function selectOneNode(rng) { + return !rng.collapsed && rng.startContainer.nodeType == 1 && rng.startContainer === rng.endContainer && rng.endOffset - rng.startOffset == 1 + } + + function setEndPoint(toStart, node, offset, range) { + //如果node是自闭合标签要处理 + if (node.nodeType == 1 && (dtd.$empty[node.tagName] || dtd.$nonChild[node.tagName])) { + offset = domUtils.getNodeIndex(node) + (toStart ? 0 : 1); + node = node.parentNode; + } + if (toStart) { + range.startContainer = node; + range.startOffset = offset; + if (!range.endContainer) { + range.collapse(true); + } + } else { + range.endContainer = node; + range.endOffset = offset; + if (!range.startContainer) { + range.collapse(false); + } + } + updateCollapse(range); + return range; + } + + function execContentsAction(range, action) { + //调整边界 + //range.includeBookmark(); + var start = range.startContainer, + end = range.endContainer, + startOffset = range.startOffset, + endOffset = range.endOffset, + doc = range.document, + frag = doc.createDocumentFragment(), + tmpStart, tmpEnd; + if (start.nodeType == 1) { + start = start.childNodes[startOffset] || (tmpStart = start.appendChild(doc.createTextNode(''))); + } + if (end.nodeType == 1) { + end = end.childNodes[endOffset] || (tmpEnd = end.appendChild(doc.createTextNode(''))); + } + if (start === end && start.nodeType == 3) { + frag.appendChild(doc.createTextNode(start.substringData(startOffset, endOffset - startOffset))); + //is not clone + if (action) { + start.deleteData(startOffset, endOffset - startOffset); + range.collapse(true); + } + return frag; + } + var current, currentLevel, clone = frag, + startParents = domUtils.findParents(start, true), endParents = domUtils.findParents(end, true); + for (var i = 0; startParents[i] == endParents[i];) { + i++; + } + for (var j = i, si; si = startParents[j]; j++) { + current = si.nextSibling; + if (si == start) { + if (!tmpStart) { + if (range.startContainer.nodeType == 3) { + clone.appendChild(doc.createTextNode(start.nodeValue.slice(startOffset))); + //is not clone + if (action) { + start.deleteData(startOffset, start.nodeValue.length - startOffset); + } + } else { + clone.appendChild(!action ? start.cloneNode(true) : start); + } + } + } else { + currentLevel = si.cloneNode(false); + clone.appendChild(currentLevel); + } + while (current) { + if (current === end || current === endParents[j]) { + break; + } + si = current.nextSibling; + clone.appendChild(!action ? current.cloneNode(true) : current); + current = si; + } + clone = currentLevel; + } + clone = frag; + if (!startParents[i]) { + clone.appendChild(startParents[i - 1].cloneNode(false)); + clone = clone.firstChild; + } + for (var j = i, ei; ei = endParents[j]; j++) { + current = ei.previousSibling; + if (ei == end) { + if (!tmpEnd && range.endContainer.nodeType == 3) { + clone.appendChild(doc.createTextNode(end.substringData(0, endOffset))); + //is not clone + if (action) { + end.deleteData(0, endOffset); + } + } + } else { + currentLevel = ei.cloneNode(false); + clone.appendChild(currentLevel); + } + //如果两端同级，右边第一次已经被开始做了 + if (j != i || !startParents[i]) { + while (current) { + if (current === start) { + break; + } + ei = current.previousSibling; + clone.insertBefore(!action ? current.cloneNode(true) : current, clone.firstChild); + current = ei; + } + } + clone = currentLevel; + } + if (action) { + range.setStartBefore(!endParents[i] ? endParents[i - 1] : !startParents[i] ? startParents[i - 1] : endParents[i]).collapse(true); + } + tmpStart && domUtils.remove(tmpStart); + tmpEnd && domUtils.remove(tmpEnd); + return frag; + } + + /** + * 创建一个跟document绑定的空的Range实例 + * @constructor + * @param { Document } document 新建的选区所属的文档对象 + */ + + /** + * @property { Node } startContainer 当前Range的开始边界的容器节点, 可以是一个元素节点或者是文本节点 + */ + + /** + * @property { Node } startOffset 当前Range的开始边界容器节点的偏移量, 如果是元素节点， + * 该值就是childNodes中的第几个节点， 如果是文本节点就是文本内容的第几个字符 + */ + + /** + * @property { Node } endContainer 当前Range的结束边界的容器节点, 可以是一个元素节点或者是文本节点 + */ + + /** + * @property { Node } endOffset 当前Range的结束边界容器节点的偏移量, 如果是元素节点， + * 该值就是childNodes中的第几个节点， 如果是文本节点就是文本内容的第几个字符 + */ + + /** + * @property { Boolean } collapsed 当前Range是否闭合 + * @default true + * @remind Range是闭合的时候， startContainer === endContainer && startOffset === endOffset + */ + + /** + * @property { Document } document 当前Range所属的Document对象 + * @remind 不同range的的document属性可以是不同的 + */ + var Range = dom.Range = function (document) { + var me = this; + me.startContainer = + me.startOffset = + me.endContainer = + me.endOffset = null; + me.document = document; + me.collapsed = true; + }; + + /** + * 删除fillData + * @param doc + * @param excludeNode + */ + function removeFillData(doc, excludeNode) { + try { + if (fillData && domUtils.inDoc(fillData, doc)) { + if (!fillData.nodeValue.replace(fillCharReg, '').length) { + var tmpNode = fillData.parentNode; + domUtils.remove(fillData); + while (tmpNode && domUtils.isEmptyInlineElement(tmpNode) && + //safari的contains有bug + (browser.safari ? !(domUtils.getPosition(tmpNode, excludeNode) & domUtils.POSITION_CONTAINS) : !tmpNode.contains(excludeNode)) + ) { + fillData = tmpNode.parentNode; + domUtils.remove(tmpNode); + tmpNode = fillData; + } + } else { + fillData.nodeValue = fillData.nodeValue.replace(fillCharReg, ''); + } + } + } catch (e) { + } + } + + /** + * @param node + * @param dir + */ + function mergeSibling(node, dir) { + var tmpNode; + node = node[dir]; + while (node && domUtils.isFillChar(node)) { + tmpNode = node[dir]; + domUtils.remove(node); + node = tmpNode; + } + } + + Range.prototype = { + + /** + * 克隆选区的内容到一个DocumentFragment里 + * @method cloneContents + * @return { DocumentFragment | NULL } 如果选区是闭合的将返回null， 否则， 返回包含所clone内容的DocumentFragment元素 + * @example + * ```html + * + * + * xx[xxx]x + * + * + * + * ``` + */ + cloneContents: function () { + return this.collapsed ? null : execContentsAction(this, 0); + }, + + /** + * 删除当前选区范围中的所有内容 + * @method deleteContents + * @remind 执行完该操作后， 当前Range对象变成了闭合状态 + * @return { UE.dom.Range } 当前操作的Range对象 + * @example + * ```html + * + * + * xx[xxx]x + * + * + * + * ``` + */ + deleteContents: function () { + var txt; + if (!this.collapsed) { + execContentsAction(this, 1); + } + if (browser.webkit) { + txt = this.startContainer; + if (txt.nodeType == 3 && !txt.nodeValue.length) { + this.setStartBefore(txt).collapse(true); + domUtils.remove(txt); + } + } + return this; + }, + + /** + * 将当前选区的内容提取到一个DocumentFragment里 + * @method extractContents + * @remind 执行该操作后， 选区将变成闭合状态 + * @warning 执行该操作后， 原来选区所选中的内容将从dom树上剥离出来 + * @return { DocumentFragment } 返回包含所提取内容的DocumentFragment对象 + * @example + * ```html + * + * + * xx[xxx]x + * + * + * + */ + extractContents: function () { + return this.collapsed ? null : execContentsAction(this, 2); + }, + + /** + * 设置Range的开始容器节点和偏移量 + * @method setStart + * @remind 如果给定的节点是元素节点，那么offset指的是其子元素中索引为offset的元素， + * 如果是文本节点，那么offset指的是其文本内容的第offset个字符 + * @remind 如果提供的容器节点是一个不能包含子元素的节点， 则该选区的开始容器将被设置 + * 为该节点的父节点， 此时， 其距离开始容器的偏移量也变成了该节点在其父节点 + * 中的索引 + * @param { Node } node 将被设为当前选区开始边界容器的节点对象 + * @param { int } offset 选区的开始位置偏移量 + * @return { UE.dom.Range } 当前range对象 + * @example + * ```html + * + * xxxxxxxxxxxxx[xxx] + * + * + * ``` + * @example + * ```html + * + * xxx
xxxx[xxxx]x
==> range.applyInlineStyle("strong") ==>xxxx[xxxx]x
+ * ``` + */ + + /** + * 给range选区中的内容添加给定的inline标签， 并且为标签附加上一些初始化属性。 + * @method applyInlineStyle + * @param { String } tagName 需要添加的标签名 + * @param { Object } attrs 跟随新添加的标签的属性 + * @return { UE.dom.Range } 当前选区 + * @example + * ```html + *xxxx[xxxx]x
+ * + * ==> + * + * + * range.applyInlineStyle("strong",{"style":"font-size:12px"}) + * + * ==> + * + *xxxx[xxxx]x
+ * ``` + */ + applyInlineStyle: function (tagName, attrs, list) { + if (this.collapsed) return this; + this.trimBoundary().enlarge(false, + function (node) { + return node.nodeType == 1 && domUtils.isBlockElm(node) + }).adjustmentBoundary(); + var bookmark = this.createBookmark(), + end = bookmark.end, + filterFn = function (node) { + return node.nodeType == 1 ? node.tagName.toLowerCase() != 'br' : !domUtils.isWhitespace(node); + }, + current = domUtils.getNextDomNode(bookmark.start, false, filterFn), + node, + pre, + range = this.cloneRange(); + while (current && (domUtils.getPosition(current, end) & domUtils.POSITION_PRECEDING)) { + if (current.nodeType == 3 || dtd[tagName][current.tagName]) { + range.setStartBefore(current); + node = current; + while (node && (node.nodeType == 3 || dtd[tagName][node.tagName]) && node !== end) { + pre = node; + node = domUtils.getNextDomNode(node, node.nodeType == 1, null, function (parent) { + return dtd[tagName][parent.tagName]; + }); + } + var frag = range.setEndAfter(pre).extractContents(), elm; + if (list && list.length > 0) { + var level, top; + top = level = list[0].cloneNode(false); + for (var i = 1, ci; ci = list[i++];) { + level.appendChild(ci.cloneNode(false)); + level = level.firstChild; + } + elm = level; + } else { + elm = range.document.createElement(tagName); + } + if (attrs) { + domUtils.setAttributes(elm, attrs); + } + elm.appendChild(frag); + range.insertNode(list ? top : elm); + //处理下滑线在a上的情况 + var aNode; + if (tagName == 'span' && attrs.style && /text\-decoration/.test(attrs.style) && (aNode = domUtils.findParentByTagName(elm, 'a', true))) { + domUtils.setAttributes(aNode, attrs); + domUtils.remove(elm, true); + elm = aNode; + } else { + domUtils.mergeSibling(elm); + domUtils.clearEmptySibling(elm); + } + //去除子节点相同的 + domUtils.mergeChild(elm, attrs); + current = domUtils.getNextDomNode(elm, false, filterFn); + domUtils.mergeToParent(elm); + if (node === end) { + break; + } + } else { + current = domUtils.getNextDomNode(current, true, filterFn); + } + } + return this.moveToBookmark(bookmark); + }, + + /** + * 移除当前选区内指定的inline标签，但保留其中的内容 + * @method removeInlineStyle + * @param { String } tagName 需要移除的标签名 + * @return { UE.dom.Range } 当前的range对象 + * @example + * ```html + * xx[xxxxyyyzz]z => range.removeInlineStyle(["em"]) => xx[xxxxyyyzz]z + * ``` + */ + + /** + * 移除当前选区内指定的一组inline标签，但保留其中的内容 + * @method removeInlineStyle + * @param { Array } tagNameArr 需要移除的标签名的数组 + * @return { UE.dom.Range } 当前的range对象 + * @see UE.dom.Range:removeInlineStyle(String) + */ + removeInlineStyle: function (tagNames) { + if (this.collapsed) return this; + tagNames = utils.isArray(tagNames) ? tagNames : [tagNames]; + this.shrinkBoundary().adjustmentBoundary(); + var start = this.startContainer, end = this.endContainer; + while (1) { + if (start.nodeType == 1) { + if (utils.indexOf(tagNames, start.tagName.toLowerCase()) > -1) { + break; + } + if (start.tagName.toLowerCase() == 'body') { + start = null; + break; + } + } + start = start.parentNode; + } + while (1) { + if (end.nodeType == 1) { + if (utils.indexOf(tagNames, end.tagName.toLowerCase()) > -1) { + break; + } + if (end.tagName.toLowerCase() == 'body') { + end = null; + break; + } + } + end = end.parentNode; + } + var bookmark = this.createBookmark(), + frag, + tmpRange; + if (start) { + tmpRange = this.cloneRange().setEndBefore(bookmark.start).setStartBefore(start); + frag = tmpRange.extractContents(); + tmpRange.insertNode(frag); + domUtils.clearEmptySibling(start, true); + start.parentNode.insertBefore(bookmark.start, start); + } + if (end) { + tmpRange = this.cloneRange().setStartAfter(bookmark.end).setEndAfter(end); + frag = tmpRange.extractContents(); + tmpRange.insertNode(frag); + domUtils.clearEmptySibling(end, false, true); + end.parentNode.insertBefore(bookmark.end, end.nextSibling); + } + var current = domUtils.getNextDomNode(bookmark.start, false, function (node) { + return node.nodeType == 1; + }), next; + while (current && current !== bookmark.end) { + next = domUtils.getNextDomNode(current, true, function (node) { + return node.nodeType == 1; + }); + if (utils.indexOf(tagNames, current.tagName.toLowerCase()) > -1) { + domUtils.remove(current, true); + } + current = next; + } + return this.moveToBookmark(bookmark); + }, + + /** + * 获取当前选中的自闭合的节点 + * @method getClosedNode + * @return { Node | NULL } 如果当前选中的是自闭合节点， 则返回该节点， 否则返回NULL + */ + getClosedNode: function () { + var node; + if (!this.collapsed) { + var range = this.cloneRange().adjustmentBoundary().shrinkBoundary(); + if (selectOneNode(range)) { + var child = range.startContainer.childNodes[range.startOffset]; + if (child && child.nodeType == 1 && (dtd.$empty[child.tagName] || dtd.$nonChild[child.tagName])) { + node = child; + } + } + } + return node; + }, + + /** + * 在页面上高亮range所表示的选区 + * @method select + * @return { UE.dom.Range } 返回当前Range对象 + */ + //这里不区分ie9以上，trace:3824 + select: browser.ie ? function (noFillData, textRange) { + var nativeRange; + if (!this.collapsed) + this.shrinkBoundary(); + var node = this.getClosedNode(); + if (node && !textRange) { + try { + nativeRange = this.document.body.createControlRange(); + nativeRange.addElement(node); + nativeRange.select(); + } catch (e) { + } + return this; + } + var bookmark = this.createBookmark(), + start = bookmark.start, + end; + nativeRange = this.document.body.createTextRange(); + nativeRange.moveToElementText(start); + nativeRange.moveStart('character', 1); + if (!this.collapsed) { + var nativeRangeEnd = this.document.body.createTextRange(); + end = bookmark.end; + nativeRangeEnd.moveToElementText(end); + nativeRange.setEndPoint('EndToEnd', nativeRangeEnd); + } else { + if (!noFillData && this.startContainer.nodeType != 3) { + //使用|x固定住光标 + var tmpText = this.document.createTextNode(fillChar), + tmp = this.document.createElement('span'); + tmp.appendChild(this.document.createTextNode(fillChar)); + start.parentNode.insertBefore(tmp, start); + start.parentNode.insertBefore(tmpText, start); + //当点b,i,u时，不能清除i上边的b + removeFillData(this.document, tmpText); + fillData = tmpText; + mergeSibling(tmp, 'previousSibling'); + mergeSibling(start, 'nextSibling'); + nativeRange.moveStart('character', -1); + nativeRange.collapse(true); + } + } + this.moveToBookmark(bookmark); + tmp && domUtils.remove(tmp); + //IE在隐藏状态下不支持range操作，catch一下 + try { + nativeRange.select(); + } catch (e) { + } + return this; + } : function (notInsertFillData) { + function checkOffset(rng) { + + function check(node, offset, dir) { + if (node.nodeType == 3 && node.nodeValue.length < offset) { + rng[dir + 'Offset'] = node.nodeValue.length + } + } + + check(rng.startContainer, rng.startOffset, 'start'); + check(rng.endContainer, rng.endOffset, 'end'); + } + + var win = domUtils.getWindow(this.document), + sel = win.getSelection(), + txtNode; + //FF下关闭自动长高时滚动条在关闭dialog时会跳 + //ff下如果不body.focus将不能定位闭合光标到编辑器内 + browser.gecko ? this.document.body.focus() : win.focus(); + if (sel) { + sel.removeAllRanges(); + // trace:870 chrome/safari后边是br对于闭合得range不能定位 所以去掉了判断 + // this.startContainer.nodeType != 3 &&! ((child = this.startContainer.childNodes[this.startOffset]) && child.nodeType == 1 && child.tagName == 'BR' + if (this.collapsed && !notInsertFillData) { // //opear如果没有节点接着，原生的不能够定位,不能在body的第一级插入空白节点 // if (notInsertFillData && browser.opera && !domUtils.isBody(this.startContainer) && this.startContainer.nodeType == 1) { // var tmp = this.document.createTextNode(''); // this.insertNode(tmp).setStart(tmp, 0).collapse(true); // } // - //处理光标落在文本节点的情况 - //处理以下的情况 - //|xxxx - //xxxx|xxxx - //xxxx| - var start = this.startContainer,child = start; - if(start.nodeType == 1){ - child = start.childNodes[this.startOffset]; + //处理光标落在文本节点的情况 + //处理以下的情况 + //|xxxx + //xxxx|xxxx + //xxxx| + var start = this.startContainer, child = start; + if (start.nodeType == 1) { + child = start.childNodes[this.startOffset]; - } - if( !(start.nodeType == 3 && this.startOffset) && - (child ? - (!child.previousSibling || child.previousSibling.nodeType != 3) - : - (!start.lastChild || start.lastChild.nodeType != 3) - ) - ){ - txtNode = this.document.createTextNode(fillChar); - //跟着前边走 - this.insertNode(txtNode); - removeFillData(this.document, txtNode); - mergeSibling(txtNode, 'previousSibling'); - mergeSibling(txtNode, 'nextSibling'); - fillData = txtNode; - this.setStart(txtNode, browser.webkit ? 1 : 0).collapse(true); - } - } - var nativeRange = this.document.createRange(); - if(this.collapsed && browser.opera && this.startContainer.nodeType == 1){ - var child = this.startContainer.childNodes[this.startOffset]; - if(!child){ - //往前靠拢 - child = this.startContainer.lastChild; - if( child && domUtils.isBr(child)){ - this.setStartBefore(child).collapse(true); } - }else{ - //向后靠拢 - while(child && domUtils.isBlockElm(child)){ - if(child.nodeType == 1 && child.childNodes[0]){ - child = child.childNodes[0] - }else{ - break; + if (!(start.nodeType == 3 && this.startOffset) && + (child ? + (!child.previousSibling || child.previousSibling.nodeType != 3) + : + (!start.lastChild || start.lastChild.nodeType != 3) + ) + ) { + txtNode = this.document.createTextNode(fillChar); + //跟着前边走 + this.insertNode(txtNode); + removeFillData(this.document, txtNode); + mergeSibling(txtNode, 'previousSibling'); + mergeSibling(txtNode, 'nextSibling'); + fillData = txtNode; + this.setStart(txtNode, browser.webkit ? 1 : 0).collapse(true); + } + } + var nativeRange = this.document.createRange(); + if (this.collapsed && browser.opera && this.startContainer.nodeType == 1) { + var child = this.startContainer.childNodes[this.startOffset]; + if (!child) { + //往前靠拢 + child = this.startContainer.lastChild; + if (child && domUtils.isBr(child)) { + this.setStartBefore(child).collapse(true); } - } - child && this.setStartBefore(child).collapse(true) - } - - } - //是createAddress最后一位算的不准，现在这里进行微调 - checkOffset(this); - nativeRange.setStart(this.startContainer, this.startOffset); - nativeRange.setEnd(this.endContainer, this.endOffset); - sel.addRange(nativeRange); - } - return this; - }, - - /** - * 滚动到当前range开始的位置 - * @method scrollToView - * @param { Window } win 当前range对象所属的window对象 - * @return { UE.dom.Range } 当前Range对象 - */ - - /** - * 滚动到距离当前range开始位置 offset 的位置处 - * @method scrollToView - * @param { Window } win 当前range对象所属的window对象 - * @param { Number } offset 距离range开始位置处的偏移量， 如果为正数， 则向下偏移， 反之， 则向上偏移 - * @return { UE.dom.Range } 当前Range对象 - */ - scrollToView:function (win, offset) { - win = win ? window : domUtils.getWindow(this.document); - var me = this, - span = me.document.createElement('span'); - //trace:717 - span.innerHTML = ' '; - me.cloneRange().insertNode(span); - domUtils.scrollToView(span, win, offset); - domUtils.remove(span); - return me; - }, - - /** - * 判断当前选区内容是否占位符 - * @private - * @method inFillChar - * @return { Boolean } 如果是占位符返回true，否则返回false - */ - inFillChar : function(){ - var start = this.startContainer; - if(this.collapsed && start.nodeType == 3 - && start.nodeValue.replace(new RegExp('^' + domUtils.fillChar),'').length + 1 == start.nodeValue.length - ){ - return true; - } - return false; - }, - - /** - * 保存 - * @method createAddress - * @private - * @return { Boolean } 返回开始和结束的位置 - * @example - * ```html - * - *- * aaaa - * - * - * bbbb - * - * - *
- * - * - * - * ``` - */ - createAddress : function(ignoreEnd,ignoreTxt){ - var addr = {},me = this; - - function getAddress(isStart){ - var node = isStart ? me.startContainer : me.endContainer; - var parents = domUtils.findParents(node,true,function(node){return !domUtils.isBody(node)}), - addrs = []; - for(var i = 0,ci;ci = parents[i++];){ - addrs.push(domUtils.getNodeIndex(ci,ignoreTxt)); - } - var firstIndex = 0; - - if(ignoreTxt){ - if(node.nodeType == 3){ - var tmpNode = node.previousSibling; - while(tmpNode && tmpNode.nodeType == 3){ - firstIndex += tmpNode.nodeValue.replace(fillCharReg,'').length; - tmpNode = tmpNode.previousSibling; - } - firstIndex += (isStart ? me.startOffset : me.endOffset)// - (fillCharReg.test(node.nodeValue) ? 1 : 0 ) - }else{ - node = node.childNodes[ isStart ? me.startOffset : me.endOffset]; - if(node){ - firstIndex = domUtils.getNodeIndex(node,ignoreTxt); - }else{ - node = isStart ? me.startContainer : me.endContainer; - var first = node.firstChild; - while(first){ - if(domUtils.isFillChar(first)){ - first = first.nextSibling; - continue; + } else { + //向后靠拢 + while (child && domUtils.isBlockElm(child)) { + if (child.nodeType == 1 && child.childNodes[0]) { + child = child.childNodes[0] + } else { + break; } - firstIndex++; - if(first.nodeType == 3){ - while( first && first.nodeType == 3){ + } + child && this.setStartBefore(child).collapse(true) + } + + } + //是createAddress最后一位算的不准，现在这里进行微调 + checkOffset(this); + nativeRange.setStart(this.startContainer, this.startOffset); + nativeRange.setEnd(this.endContainer, this.endOffset); + sel.addRange(nativeRange); + } + return this; + }, + + /** + * 滚动到当前range开始的位置 + * @method scrollToView + * @param { Window } win 当前range对象所属的window对象 + * @return { UE.dom.Range } 当前Range对象 + */ + + /** + * 滚动到距离当前range开始位置 offset 的位置处 + * @method scrollToView + * @param { Window } win 当前range对象所属的window对象 + * @param { Number } offset 距离range开始位置处的偏移量， 如果为正数， 则向下偏移， 反之， 则向上偏移 + * @return { UE.dom.Range } 当前Range对象 + */ + scrollToView: function (win, offset) { + win = win ? window : domUtils.getWindow(this.document); + var me = this, + span = me.document.createElement('span'); + //trace:717 + span.innerHTML = ' '; + me.cloneRange().insertNode(span); + domUtils.scrollToView(span, win, offset); + domUtils.remove(span); + return me; + }, + + /** + * 判断当前选区内容是否占位符 + * @private + * @method inFillChar + * @return { Boolean } 如果是占位符返回true，否则返回false + */ + inFillChar: function () { + var start = this.startContainer; + if (this.collapsed && start.nodeType == 3 + && start.nodeValue.replace(new RegExp('^' + domUtils.fillChar), '').length + 1 == start.nodeValue.length + ) { + return true; + } + return false; + }, + + /** + * 保存 + * @method createAddress + * @private + * @return { Boolean } 返回开始和结束的位置 + * @example + * ```html + * + *+ * aaaa + * + * + * bbbb + * + * + *
+ * + * + * + * ``` + */ + createAddress: function (ignoreEnd, ignoreTxt) { + var addr = {}, me = this; + + function getAddress(isStart) { + var node = isStart ? me.startContainer : me.endContainer; + var parents = domUtils.findParents(node, true, function (node) { + return !domUtils.isBody(node) + }), + addrs = []; + for (var i = 0, ci; ci = parents[i++];) { + addrs.push(domUtils.getNodeIndex(ci, ignoreTxt)); + } + var firstIndex = 0; + + if (ignoreTxt) { + if (node.nodeType == 3) { + var tmpNode = node.previousSibling; + while (tmpNode && tmpNode.nodeType == 3) { + firstIndex += tmpNode.nodeValue.replace(fillCharReg, '').length; + tmpNode = tmpNode.previousSibling; + } + firstIndex += (isStart ? me.startOffset : me.endOffset)// - (fillCharReg.test(node.nodeValue) ? 1 : 0 ) + } else { + node = node.childNodes[isStart ? me.startOffset : me.endOffset]; + if (node) { + firstIndex = domUtils.getNodeIndex(node, ignoreTxt); + } else { + node = isStart ? me.startContainer : me.endContainer; + var first = node.firstChild; + while (first) { + if (domUtils.isFillChar(first)) { + first = first.nextSibling; + continue; + } + firstIndex++; + if (first.nodeType == 3) { + while (first && first.nodeType == 3) { + first = first.nextSibling; + } + } else { first = first.nextSibling; } - }else{ - first = first.nextSibling; } } } - } - - }else{ - firstIndex = isStart ? domUtils.isFillChar(node) ? 0 : me.startOffset : me.endOffset - } - if(firstIndex < 0){ - firstIndex = 0; - } - addrs.push(firstIndex); - return addrs; - } - addr.startAddress = getAddress(true); - if(!ignoreEnd){ - addr.endAddress = me.collapsed ? [].concat(addr.startAddress) : getAddress(); - } - return addr; - }, - - /** - * 保存 - * @method createAddress - * @private - * @return { Boolean } 返回开始和结束的位置 - * @example - * ```html - * - *- * aaaa - * - * - * bbbb - * - * - *
- * - * - * - * ``` - */ - moveToAddress : function(addr,ignoreEnd){ - var me = this; - function getNode(address,isStart){ - var tmpNode = me.document.body, - parentNode,offset; - for(var i= 0,ci,l=address.length;i