最近在網上碰到一個人問了我一個問題，在可編輯div中插入文字或者圖片。因為web在線編輯器我從來只是用，基本不會去研究源代碼。后來正好一個在線聊天web項目中也要用到這個功能，我就特地看看了代碼。

基本上編輯器或者在線聊天web頁面，是不太可能用textarea在做輸入框的，因為我們可能要插入圖片或者超級鏈接，因此選擇在iframe或者div作為輸入框是必須的。
我這里用的是 div.

要使div可編輯 必須 加入 contentEditable="true" 這個屬性。
然后就是獲取光標位置(或者選擇文字位置)進行文字或者html的插入 。
由于火狐等標準瀏覽器支持getSelection方法，IE9以上也支持，但是萬惡的iE6-8不支持，因此要分兩部分代碼來寫。由于這些代碼很簡單，以下先貼一遍

function insertHTML(html)
{
var dthis=$(“#div3”)[0];//要插入內容的某個div,在標準瀏覽器中 無需這句話
var sel, range;
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();
}
}

以上代碼基本 完成了 在可編輯div中 插入指定的html內容，這些代碼在baidu或者google中到處可以搜到，因此不再解釋為什么這么寫（太普遍了)
執行后 會發現在IE或者非標準瀏覽器中 是正常的。在火狐或者chrome中 就不正常了
譬如 以下頁面 ,我有 不定數量的div(可能是程序動態生成),我只需要其中某一個div進行html的插入，其他不需要。

…..其他html元素…..
<div id=”div1″ contentEditable=”true” ></div>
<div id=”div2″ contentEditable=”true” ></div>
<div contentEditable=”true” id=”div3″></div>
<input type=”button” id=”cmdInsert” onclick=”執行向div3插入html方法”/>