之前做了一个可编辑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>
新闻热点
疑难解答
