本文主要介紹 div 標簽設置 contenteditable = ' true ' 時，在游標位置插入輸入的內容，或在游標位置粘貼純文本內容。文中涉及知識，可參考以下： http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plai ...
本文主要介紹 div 標簽設置 contenteditable = ' true ' 時，在游標位置插入輸入的內容，或在游標位置粘貼純文本內容。文中涉及知識，可參考以下： http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/
http://www.jb51.net/article/57650.htm
https://www.cnblogs.com/rainman/archive/2011/02/27/1966482.html
http://www.zhangxinxu.com/wordpress/2011/04/js-range-html%E6%96%87%E6%A1%A3%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E9%80%89%E4%B8%AD%E3%80%81%E5%BA%93%E5%8F%8A%E5%BA%94%E7%94%A8%E4%BB%8B%E7%BB%8D/
http://kjah.iteye.com/blog/422509
先搭好 html ，一個按鈕用於插入操作，一個 div 實現 contenteditable 功能，及主要邏輯
<button type="button" id='insert'>插入標題</button> <div contentEditable="true" id="editor"> <h3>副標題</h3> <p>文本</p> </div>
接著是實現 js 邏輯功能
document.getElementById('insert').onclick=function(){
// 點擊插入按鈕時，系統彈框輸入內容
var content = prompt('請輸入內容');
// 防止編輯框沒有獲取焦點時點擊，故加一個操作，使編輯框獲取焦點
document.getElementById('editor').focus();
// 執行插入方法
if(!!content){
insertHtml('<h4>'+content+'</h4>');
}
}
主要邏輯在 insertHtml 方法中
function insertHtmlAtCaret(html) { //Selection 對象，表示用戶選擇的文本範圍或游標的當前位置。 //在非IE瀏覽器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()獲得selection對象 //anchor 選中區域的“起點”。 //focus 選中區域的“結束點”。 //range 是一種fragment(HTML片斷)，它包含了節點或文本節點的一部分。一般情況下，同一時刻頁面中只可能有一個range，也有可能是多個range（使用Ctrl健進行多選，不過有的瀏覽器不允許，例如Chrome）。可以從selection中獲得range對象，也可以使用document.createRange()方法獲得。 var sel = window.getSelection(), range; if (sel.getRangeAt && sel.rangeCount) { //getRangeAt(index) 從當前selection對象中獲得一個range對象。 range = sel.getRangeAt(0); //deleteContents()方法,range內容會被刪除 range.deleteContents(); //將輸入的內容寫入並載入到 dom 中 var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ( (node = el.firstChild) ) { lastNode = frag.appendChild(node); } //insertNode,在range的開始位置插入一 個節點 range.insertNode(frag); //收尾 if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } }
此時往編輯框里粘貼內容，會帶上原本樣式，顯然不是我們要的結果，需對粘貼文本進行更改
document.getElementById('editor').onpaste=function(event){
var e = event || window.event
// 阻止預設粘貼
e.preventDefault();
// 粘貼事件有一個clipboardData的屬性，提供了對剪貼板的訪問
// clipboardData的getData(fomat) 從剪貼板獲取指定格式的數據
var text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在這裡輸入文本');
// 插入
document.execCommand("insertText", false, text);
};
最後附上完整代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>contenteditable</title> <style> #insert{ width: 90px; height: 30px; border: 1px solid #ccc; background-color: #fff; margin: 10px; } #editor{ padding: 10px; overflow-y: auto; min-height:200px; border:1px solid #f33; outline: 0; } #editor h4{ margin: 10px 0; } </style> </head> <body> <button type="button" id='insert'>插入標題</button> <div contentEditable="true" id="editor"> <h3>副標題</h3> <p>文本</p> </div> </body> <script> document.getElementById('insert').onclick=function(){ var content = prompt('請輸入內容'); document.getElementById('editor').focus(); if(!!content){ insertHtmlAtCaret('<h4>'+content+'</h4>'); } } document.getElementById('editor').onpaste=function(event){ var e = event || window.event e.preventDefault(); var text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在這裡輸入文本'); document.execCommand("insertText", false, text); }; function insertHtmlAtCaret(html) { var sel = window.getSelection(), range; 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); } } } </script> </html>
