可编辑div中如何在光标位置添加内容

最新推荐文章于 2022-06-24 15:15:15 发布

原创最新推荐文章于 2022-06-24 15:15:15 发布 · 7.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #jQuery

html 同时被 2 个专栏收录

1 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

本文记录了在可编辑div中实现光标位置插入内容的方法，适用于HTML与jQuery结合的场景，供日后参考。

之前做了一个可编辑div需要在里面插入内容，搜了好多代码，就这个能实现我的功能，记录一下，以备以后用

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>UMEDITOR 简单功能</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="../third-party/jquery.min.js"></script>
</head>
<body>

    <h1>UMEDITOR 简单功能</h1>
	<script type="text/javascript">
		$(function(){
			$("#myEditor").focus(function(){
		    	$("#myEditor").removeClass("flag");
		    });
		    /* $("#myEditor").blur(function(){
		    	$("#myEditor").addClass("flag");
		     }); */
		});
	
   		function add(){ 
   		 insertHTML("<input type='text' disabled />"); 
   		}
   		
   		 //再加入一个全屏事件  
   		     $(window).click(function(e)  
   		          {  
   		            if (window.getSelection)  
   		            {  
   		                 var getevent=e.srcElement?e.srcElement:e.target;//不要告诉我不知道这句的意思  
   		              //console.log(getevent.id,getevent.tagName);
   		                if(getevent.id!=null && getevent.id=="cmdInsert"||getevent.id=="myEditor")  
   		                {  
   		                	//alert(0);
   		                	//代表 点了插入html的按钮  
   		                    //则不执行getFocus方法  
   		                 }  
   		                else  
   		                	$("#myEditor").addClass("flag");//除非点了那个插入html的按钮 其他时候必须要执行getFocus来更新最后失去焦点的div  
   		            }  

   		          }) 
   		
   		       
   		function insertHTML(html)  
        {  
            var dthis=$("#myEditor")[0];//要插入内容的某个div,在标准浏览器中 无需这句话  
            //dthis.focus();
             var sel, range; 
             console.log($(dthis).hasClass("flag"));
             if($(dthis).hasClass("flag")){
            	 $(dthis).html(dthis.innerHTML+html);
            	 return;
             }
             if (window.getSelection)  
              {  
                     // IE9 and non-IE  
                     sel = window.getSelection();  
                     if (sel.getRangeAt && sel.rangeCount) {  
                     range = sel.getRangeAt(0);  
                     range.deleteContents();  
                     var el = document.createElement('div');  
                     el.innerHTML = html;  
                     var frag = document.createDocumentFragment(), node, lastNode;  
                     while ( (node = el.firstChild) )  
                      {  
                         lastNode = frag.appendChild(node);  
                      }  

                 range.insertNode(frag);  
                     if (lastNode) {  
                     range = range.cloneRange();  
                     range.setStartAfter(lastNode);  
                     range.collapse(true);  
                     sel.removeAllRanges();  
                     sel.addRange(range);  
                     }  
                    }  
             }   
             else if (document.selection && document.selection.type !='Control')   
             {  		
                 $(dthis).focus(); //在非标准浏览器中 要先让你需要插入html的div 获得焦点  
          	ierange= document.selection.createRange();//获取光标位置  
                 ierange.pasteHTML(html);    //在光标位置插入html 如果只是插入text 则就是fus.text="..."  
                 $(dthis).focus();      

             }  
        }  	
	</script>
	<button onclick="add()" id="cmdInsert" style="border: none;background-color: #fff;">增加节点</button>
    <div id="myEditor" class="flag" style="position:absolute;width:800px;height:240px;border:1px;border-color: red;background-color: #f5f5f5" contenteditable="true">
    	
    </div>
	
</body>
</html>