在可编辑div中插入文字或图片的问题解决思路

最近在网上碰到一个人问了我一个问题，在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用，基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能，我就特地看看了代码。
   基本上编辑器或者在线聊天web页面，是不太可能用textarea在做输入框的，因为我们可能要插入图片或者超级链接，因此选择在iframe或者div作为输入框是必须的。
   我这里用的是 div.
要使div可编辑必须加入 contentEditable="true" 这个属性。
然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入。
由于火狐等标准浏览器支持getSelection方法，IE9以上也支持，但是万恶的iE6-8不支持，因此要分两部分代码来写。由于这些代码很简单，以下先贴一遍
[javascript]
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]
.....其他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方法"/>
<pre name="code" class="html">.....其他html元素.....</pre><br>
<p></p>
<pre></pre>
<br>
如上页面我只需要div3 支持插入html 其他两个只是可编辑而已。<br>
<p></p>
<p>使用上述代码会发现，如果最后一个失去焦点的是 div3 那么一切正常如果不是div3 或者我又点到页面其他控件或者空白处，会发现插入的html没有插入到我们想要的div3中而是插入到了其他地方。</p>
<p> 这其实不是bug,而是正常现象，getSelection 可以横跨很多域，因此无法保证获得出来的range一定是你需要的div<br>
</p>
<p> 这里我再次申明，我实在不想看(哪怕看一眼)国内的在线web编辑器是如何实现的。经过我翻查了度娘和google发现有个思路可以解决。</p>
<p><br>
</p>
<p> 其实我们要解决的就是一件事情，每当页面上的元素(包括div或者任意元素) 获得焦点又失去后，我们只需获得最后一个失去焦点的div是否是div3,如果是则执行上述代码，如果不是直接在div3的内容后面加入要插入的html（硬编码就可以。不要告诉我不会）</p>
<p> 一开始我想到的办法是对div3设置一个click事件以及focus事件

补充：web前端 , JavaScript ,