JS在可编辑DIV （contenteditable="true"）中的光标位置插入内容或表情

近期需开发一个DIV做的编辑器，插入表情图片可直接预览效果，仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码，自己整理了下。写出来只是和大家分享下，我自己也不大懂，经过努力，幸好搞定。

<input type="button" value="插入字符" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');" />

<div contenteditable="true" style="height:50px; border:2px solid red;" id="test"> </div>

<script type="text/javascript">

    function insertHtmlAtCaret(html) {

        var sel, range;

        if (window.getSelection) {

            // IE9 and non-IE

            sel = window.getSelection();

            if (sel.getRangeAt && sel.rangeCount) {

                range = sel.getRangeAt(0);

                range.deleteContents();

                // Range.createContextualFragment() would be useful here but is

                // non-standard and not supported in all browsers (IE9, for one)

                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);

                // Preserve the selection

                if (lastNode) {

                    range = range.cloneRange();

                    range.setStartAfter(lastNode);

                    range.collapse(true);

                    sel.removeAllRanges();

                    sel.addRange(range);

                }

            }

        } else if (document.selection && document.selection.type != "Control") {

            // IE < 9

            document.selection.createRange().pasteHTML(html);

        }

    }

</script>

参考资料：contentedit.zip