在可编辑的div中插入图片

应用场景其实就像百度贴吧中的回复框，除了文字就是表情图片。插入图片时候，需要在闪烁的光标（插入符）后边插入，插入后光标得在图片之后。常见的富文本编辑器就是这样的，但对于没接触过这一块的人来说，这么个需求实在难以下手。

经一番搜索了解，知道要完成这个功能得用到selection“选区”对象以及range“范围”对象。这些API一般开发中用得少，不太了解也是正常的（也许只是我自己菜，那就当没说好了^.^）。selection对象由window.getSelection()方法获得，它代表页面中的文本选区。选区对应的区域，就是range对象，可由selection对象的getRangeAt()方法获得。实现在光标处插入图片后将光标移到图片后边，就是使用这两个对象中的方法。

经花大时间大精力“试”出来后发现，特么也太简单了，但在一切无知的时候，真的很难。步骤如下：获得selection选区对象后，再获得范围对象range，创建图片节点，将图片节点插入到范围中，接着将范围收缩为它末端的一个点，最后将选区清除，将收缩后的范围重新添加到选区中即可。对于IE来说，selection对象只有在IE 9或以上版本中才存在，IE有自己的一套写法，更简单！

function insertImg(src) {
    if ('getSelection' in window) {
        var sel = window.getSelection();
        if (sel && sel.rangeCount === 1 && sel.isCollapsed) {
            //有选区，且选区数量是一个，且选区的起始点和终点在同一位置
            var range = sel.getRangeAt(0);
            var img = new Image();
            img.src=src;
            range.insertNode(img);
            range.collapse(false);//对于IE来说，参数不可省略
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if ('selection' in document) {
        var div = document.getElementById('content');
        div.focus();
        var range = document.selection.createRange();
        range.pasteHTML('<img src="' + src + '">');//插入文本，则range.text="xxx"即可
        div.focus();//IE 11模拟的IE5~IE8无须这一步也能获得焦点
    } 
}

DEMO如下：

参考链接：http://blog.csdn.net/shenyisyn/article/details/8277904