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

之前做了一个可编辑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>
可编辑div中如何在光标位置添加内容

猜你喜欢
