inserthtml.js 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. /**
  2. * 插入html字符串插件
  3. * @file
  4. * @since 1.2.6.1
  5. */
  6. /**
  7. * 插入html代码
  8. * @command inserthtml
  9. * @method execCommand
  10. * @param { String } cmd 命令字符串
  11. * @param { String } html 插入的html字符串
  12. * @remaind 插入的标签内容是在当前的选区位置上插入,如果当前是闭合状态,那直接插入内容, 如果当前是选中状态,将先清除当前选中内容后,再做插入
  13. * @warning 注意:该命令会对当前选区的位置,对插入的内容进行过滤转换处理。 过滤的规则遵循html语意化的原则。
  14. * @example
  15. * ```javascript
  16. * //xxx[BB]xxx 当前选区为非闭合选区,选中BB这两个文本
  17. * //执行命令,插入<b>CC</b>
  18. * //插入后的效果 xxx<b>CC</b>xxx
  19. * //<p>xx|xxx</p> 当前选区为闭合状态
  20. * //插入<p>CC</p>
  21. * //结果 <p>xx</p><p>CC</p><p>xxx</p>
  22. * //<p>xxxx</p>|</p>xxx</p> 当前选区在两个p标签之间
  23. * //插入 xxxx
  24. * //结果 <p>xxxx</p><p>xxxx</p></p>xxx</p>
  25. * ```
  26. */
  27. UE.commands['inserthtml'] = {
  28. execCommand: function (command,html,notNeedFilter){
  29. var me = this,
  30. range,
  31. div;
  32. if(!html){
  33. return;
  34. }
  35. if(me.fireEvent('beforeinserthtml',html) === true){
  36. return;
  37. }
  38. range = me.selection.getRange();
  39. div = range.document.createElement( 'div' );
  40. div.style.display = 'inline';
  41. if (!notNeedFilter) {
  42. var root = UE.htmlparser(html);
  43. //如果给了过滤规则就先进行过滤
  44. if(me.options.filterRules){
  45. UE.filterNode(root,me.options.filterRules);
  46. }
  47. //执行默认的处理
  48. me.filterInputRule(root);
  49. html = root.toHtml()
  50. }
  51. div.innerHTML = utils.trim( html );
  52. if ( !range.collapsed ) {
  53. var tmpNode = range.startContainer;
  54. if(domUtils.isFillChar(tmpNode)){
  55. range.setStartBefore(tmpNode)
  56. }
  57. tmpNode = range.endContainer;
  58. if(domUtils.isFillChar(tmpNode)){
  59. range.setEndAfter(tmpNode)
  60. }
  61. range.txtToElmBoundary();
  62. //结束边界可能放到了br的前边,要把br包含进来
  63. // x[xxx]<br/>
  64. if(range.endContainer && range.endContainer.nodeType == 1){
  65. tmpNode = range.endContainer.childNodes[range.endOffset];
  66. if(tmpNode && domUtils.isBr(tmpNode)){
  67. range.setEndAfter(tmpNode);
  68. }
  69. }
  70. if(range.startOffset == 0){
  71. tmpNode = range.startContainer;
  72. if(domUtils.isBoundaryNode(tmpNode,'firstChild') ){
  73. tmpNode = range.endContainer;
  74. if(range.endOffset == (tmpNode.nodeType == 3 ? tmpNode.nodeValue.length : tmpNode.childNodes.length) && domUtils.isBoundaryNode(tmpNode,'lastChild')){
  75. me.body.innerHTML = '<p>'+(browser.ie ? '' : '<br/>')+'</p>';
  76. range.setStart(me.body.firstChild,0).collapse(true)
  77. }
  78. }
  79. }
  80. !range.collapsed && range.deleteContents();
  81. if(range.startContainer.nodeType == 1){
  82. var child = range.startContainer.childNodes[range.startOffset],pre;
  83. if(child && domUtils.isBlockElm(child) && (pre = child.previousSibling) && domUtils.isBlockElm(pre)){
  84. range.setEnd(pre,pre.childNodes.length).collapse();
  85. while(child.firstChild){
  86. pre.appendChild(child.firstChild);
  87. }
  88. domUtils.remove(child);
  89. }
  90. }
  91. }
  92. var child,parent,pre,tmp,hadBreak = 0, nextNode;
  93. //如果当前位置选中了fillchar要干掉,要不会产生空行
  94. if(range.inFillChar()){
  95. child = range.startContainer;
  96. if(domUtils.isFillChar(child)){
  97. range.setStartBefore(child).collapse(true);
  98. domUtils.remove(child);
  99. }else if(domUtils.isFillChar(child,true)){
  100. child.nodeValue = child.nodeValue.replace(fillCharReg,'');
  101. range.startOffset--;
  102. range.collapsed && range.collapse(true)
  103. }
  104. }
  105. //列表单独处理
  106. var li = domUtils.findParentByTagName(range.startContainer,'li',true);
  107. if(li){
  108. var next,last;
  109. while(child = div.firstChild){
  110. //针对hr单独处理一下先
  111. while(child && (child.nodeType == 3 || !domUtils.isBlockElm(child) || child.tagName=='HR' )){
  112. next = child.nextSibling;
  113. range.insertNode( child).collapse();
  114. last = child;
  115. child = next;
  116. }
  117. if(child){
  118. if(/^(ol|ul)$/i.test(child.tagName)){
  119. while(child.firstChild){
  120. last = child.firstChild;
  121. domUtils.insertAfter(li,child.firstChild);
  122. li = li.nextSibling;
  123. }
  124. domUtils.remove(child)
  125. }else{
  126. var tmpLi;
  127. next = child.nextSibling;
  128. tmpLi = me.document.createElement('li');
  129. domUtils.insertAfter(li,tmpLi);
  130. tmpLi.appendChild(child);
  131. last = child;
  132. child = next;
  133. li = tmpLi;
  134. }
  135. }
  136. }
  137. li = domUtils.findParentByTagName(range.startContainer,'li',true);
  138. if(domUtils.isEmptyBlock(li)){
  139. domUtils.remove(li)
  140. }
  141. if(last){
  142. range.setStartAfter(last).collapse(true).select(true)
  143. }
  144. }else{
  145. while ( child = div.firstChild ) {
  146. if(hadBreak){
  147. var p = me.document.createElement('p');
  148. while(child && (child.nodeType == 3 || !dtd.$block[child.tagName])){
  149. nextNode = child.nextSibling;
  150. p.appendChild(child);
  151. child = nextNode;
  152. }
  153. if(p.firstChild){
  154. child = p
  155. }
  156. }
  157. range.insertNode( child );
  158. nextNode = child.nextSibling;
  159. if ( !hadBreak && child.nodeType == domUtils.NODE_ELEMENT && domUtils.isBlockElm( child ) ){
  160. parent = domUtils.findParent( child,function ( node ){ return domUtils.isBlockElm( node ); } );
  161. if ( parent && parent.tagName.toLowerCase() != 'body' && !(dtd[parent.tagName][child.nodeName] && child.parentNode === parent)){
  162. if(!dtd[parent.tagName][child.nodeName]){
  163. pre = parent;
  164. }else{
  165. tmp = child.parentNode;
  166. while (tmp !== parent){
  167. pre = tmp;
  168. tmp = tmp.parentNode;
  169. }
  170. }
  171. domUtils.breakParent( child, pre || tmp );
  172. //去掉break后前一个多余的节点 <p>|<[p> ==> <p></p><div></div><p>|</p>
  173. var pre = child.previousSibling;
  174. domUtils.trimWhiteTextNode(pre);
  175. if(!pre.childNodes.length){
  176. domUtils.remove(pre);
  177. }
  178. //trace:2012,在非ie的情况,切开后剩下的节点有可能不能点入光标添加br占位
  179. if(!browser.ie &&
  180. (next = child.nextSibling) &&
  181. domUtils.isBlockElm(next) &&
  182. next.lastChild &&
  183. !domUtils.isBr(next.lastChild)){
  184. next.appendChild(me.document.createElement('br'));
  185. }
  186. hadBreak = 1;
  187. }
  188. }
  189. var next = child.nextSibling;
  190. if(!div.firstChild && next && domUtils.isBlockElm(next)){
  191. range.setStart(next,0).collapse(true);
  192. break;
  193. }
  194. range.setEndAfter( child ).collapse();
  195. }
  196. child = range.startContainer;
  197. if(nextNode && domUtils.isBr(nextNode)){
  198. domUtils.remove(nextNode)
  199. }
  200. //用chrome可能有空白展位符
  201. if(domUtils.isBlockElm(child) && domUtils.isEmptyNode(child)){
  202. if(nextNode = child.nextSibling){
  203. domUtils.remove(child);
  204. if(nextNode.nodeType == 1 && dtd.$block[nextNode.tagName]){
  205. range.setStart(nextNode,0).collapse(true).shrinkBoundary()
  206. }
  207. }else{
  208. try{
  209. child.innerHTML = browser.ie ? domUtils.fillChar : '<br/>';
  210. }catch(e){
  211. range.setStartBefore(child);
  212. domUtils.remove(child)
  213. }
  214. }
  215. }
  216. //加上true因为在删除表情等时会删两次,第一次是删的fillData
  217. try{
  218. range.select(true);
  219. }catch(e){}
  220. }
  221. setTimeout(function(){
  222. range = me.selection.getRange();
  223. range.scrollToView(me.autoHeightEnabled,me.autoHeightEnabled ? domUtils.getXY(me.iframe).y:0);
  224. me.fireEvent('afterinserthtml', html);
  225. },200);
  226. }
  227. };