可编辑的div中光标位置插入对应内容（img，字符串------）

时间：2023-02-05 21:41:22
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>  
  5.     <title>UMEDITOR 简单功能</title>  
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  7.     <script type="text/javascript" src="../third-party/jquery.min.js"></script>  
  8. </head>  
  9. <body>  
  10.   
  11.     <h1>UMEDITOR 简单功能</h1>  
  12.     <script type="text/javascript">  
  13.         $(function(){  
  14.             $("#myEditor").focus(function(){  
  15.                 $("#myEditor").removeClass("flag");  
  16.             });  
  17.             /* $("#myEditor").blur(function(){  
  18.                 $("#myEditor").addClass("flag");  
  19.              }); */  
  20.         });  
  21.       
  22.         function add(){   
  23.          insertHTML("<input type='text' disabled />");   
  24.         }  
  25.           
  26.          //再加入一个全屏事件    
  27.              $(window).click(function(e)    
  28.                   {    
  29.                     if (window.getSelection)    
  30.                     {    
  31.                          var getevent=e.srcElement?e.srcElement:e.target;//不要告诉我不知道这句的意思    
  32.                       //console.log(getevent.id,getevent.tagName);  
  33.                         if(getevent.id!=null && getevent.id=="cmdInsert"||getevent.id=="myEditor")    
  34.                         {    
  35.                             //alert(0);  
  36.                             //代表 点了插入html的按钮    
  37.                             //则不执行getFocus方法    
  38.                          }    
  39.                         else    
  40.                             $("#myEditor").addClass("flag");//除非点了那个插入html的按钮 其他时候必须要执行getFocus来更新最后失去焦点的div    
  41.                     }    
  42.   
  43.                   })   
  44.           
  45.                  
  46.         function insertHTML(html)    
  47.         {    
  48.             var dthis=$("#myEditor")[0];//要插入内容的某个div,在标准浏览器中 无需这句话    
  49.             //dthis.focus();  
  50.              var sel, range;   
  51.              console.log($(dthis).hasClass("flag"));  
  52.              if($(dthis).hasClass("flag")){  
  53.                  $(dthis).html(dthis.innerHTML+html);  
  54.                  return;  
  55.              }  
  56.              if (window.getSelection)    
  57.               {    
  58.                      // IE9 and non-IE    
  59.                      sel = window.getSelection();    
  60.                      if (sel.getRangeAt && sel.rangeCount) {    
  61.                      range = sel.getRangeAt(0);    
  62.                      range.deleteContents();    
  63.                      var el = document.createElement('div');    
  64.                      el.innerHTML = html;    
  65.                      var frag = document.createDocumentFragment(), node, lastNode;    
  66.                      while ( (node = el.firstChild) )    
  67.                       {    
  68.                          lastNode = frag.appendChild(node);    
  69.                       }    
  70.   
  71.                  range.insertNode(frag);    
  72.                      if (lastNode) {    
  73.                      range = range.cloneRange();    
  74.                      range.setStartAfter(lastNode);    
  75.                      range.collapse(true);    
  76.                      sel.removeAllRanges();    
  77.                      sel.addRange(range);    
  78.                      }    
  79.                     }    
  80.              }     
  81.              else if (document.selection && document.selection.type !='Control')     
  82.              {            
  83.                  $(dthis).focus(); //在非标准浏览器中 要先让你需要插入html的div 获得焦点    
  84.             ierange= document.selection.createRange();//获取光标位置    
  85.                  ierange.pasteHTML(html);    //在光标位置插入html 如果只是插入text 则就是fus.text="..."    
  86.                  $(dthis).focus();        
  87.   
  88.              }    
  89.         }     
  90.     </script>  
  91.     <button onclick="add()" id="cmdInsert" style="border: none;background-color: #fff;">增加节点</button>  
  92.     <div id="myEditor" class="flag" style="position:absolute;width:800px;height:240px;border:1px;border-color: red;background-color: #f5f5f5" contenteditable="true">  
  93.           
  94.     </div>  
  95.       
  96. </body>  
  97. </html>  

  99. 可编辑的div中光标位置插入对应内容（img，字符串------）可编辑的div中光标位置插入对应内容（img，字符串------）

对应的"flag"class样式可以随意设置我设置的是border根据实际情况设定！！falag是贯穿全局的核心
  1. 对应界面展示可编辑的div中光标位置插入对应内容（img，字符串------）

可编辑的div中光标位置插入对应内容（img，字符串------）
标签：

相关文章