修改插件，使其适用于contentEditable Div而不是Textarea

Question

  

可能重复：
  Insert text at cursor in a content editable div

我有这个代码/ jQuery插件。

jQuery.fn.extend({
     insertAtCaret: function(myValue) {
        return this.each(function(i) {
            if (document.selection) {
                //For browsers like Internet Explorer
                this.focus();
                sel = document.selection.createRange();
                sel.text = myValue;
                this.focus();
            }
            else if (this.selectionStart || this.selectionStart == '0') {
                //For browsers like Firefox and Webkit based
                var startPos = this.selectionStart;
                var endPos = this.selectionEnd;
                var scrollTop = this.scrollTop;
                this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
                this.focus();
                this.selectionStart = startPos + myValue.length;
                this.selectionEnd = startPos + myValue.length;
                this.scrollTop = scrollTop;
            } else {
                this.value += myValue;
                this.focus();
            }
        })
   }

});

此代码用于在插入符号处插入非默认字符。例如，有人按Tab键，它会插入\ t或者按下E按钮，它会插入一个P代替。我遇到的问题是这个代码在textarea中运行得很漂亮，但是当我尝试在contentEditable div上使用它时，没有任何反应。那么我可以修改此代码以使用contentEditable div吗？谢谢！

修改

在这里演示：http://jsbin.com/esiced/9/edit