之前做了一個(gè)可編輯div需要在里面插入內(nèi)容，搜了好多代碼，就這個(gè)能實(shí)現(xiàn)我的功能，記錄一下，以備以后用
<!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 />"); } //再加入一個(gè)全屏事件 $(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); //代表 點(diǎn)了插入html的按鈕 //則不執(zhí)行g(shù)etFocus方法 } else $("#myEditor").addClass("flag");//除非點(diǎn)了那個(gè)插入html的按鈕 其他時(shí)候必須要執(zhí)行g(shù)etFocus來更新最后失去焦點(diǎn)的div } }) function insertHTML(html) { var dthis=$("#myEditor")[0];//要插入內(nèi)容的某個(gè)div,在標(biāo)準(zhǔn)瀏覽器中 無需這句話 //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(); //在非標(biāo)準(zhǔn)瀏覽器中 要先讓你需要插入html的div 獲得焦點(diǎn) ierange= document.selection.createRange();//獲取光標(biāo)位置 ierange.pasteHTML(html); //在光標(biāo)位置插入html 如果只是插入text 則就是fus.text="..." $(dthis).focus(); } } </script> <button onclick="add()" id="cmdInsert" style="border: none;background-color: #fff;">增加節(jié)點(diǎn)</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>
新聞熱點(diǎn)
疑難解答
