在线编辑器光标问题

最近想处理一下Kindeditor编辑器光标乱跑的问题，就到网上搜索了一下，发现这个帖子。

https://bbs.csdn.net/topics/390704366?list=30237691

在ie中，测试通过，但在FF、chrome中，出现了两个问题。一个是插入内容后，光标返回0位置，希望是光标移动到刚插入内容的后面。
二个是无法替换。在IE中，拉黑选择部分内容，点插入即可将这拉黑部分替换成新内容。
但在FF中，无法做到。
请大牛提点！
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>光标控制器--向可编辑的div中插入文本,向输入框中插入文本</title>  
<script type="text/javascript">
/*
    测试环境：IE6~IE8,FF,Chrome,Safari
    触发对象：div,输入框[text,textarea]
    1：可向光标处插入文本
    2：返回选择的文本html
3:替换选择的文本
*/
function cursorControl(a){  //面向对象
    this.element=a;
    this.range=!1;
    this.start=0;
    this.init();
};
cursorControl.prototype={  //面向对象方法 init\gettype\getstart\inserttext\gettext,五个方法
    init:function(){
        var _that=this;
        this.element.onkeyup=this.element.onmouseup=function(){
            this.focus();
            if(document.all){ //ie
                _that.range=document.selection.createRange();//根据当前文字选择建立 TextRange 对象
            }else{
                _that.start=_that.getStart();//非IE光标定位默认
            }
        }
    },
    getType:function(){
        return Object.prototype.toString.call(this.element).match(/^\[object\s(.*)\]$/)[1];//类型判断，Object.prototype.toString
    },
    getStart:function(){//非IE
        if (this.element.selectionStart || this.element.selectionStart == '0'){ 
var tstart= this.element.selectionStart;//selection起点
var tend= this.element.selectionEnd;
            return tstart; 
        }else if (window.getSelection){  
            var rng = window.getSelection().getRangeAt(0).cloneRange();  //克隆当前range副本
            rng.setStart(this.element,0);  
            return rng.toString().length;
        }
    },
    insertText:function(text){
        this.element.focus();  
        if(document.all){
            document.selection.empty();  
            this.range.text = text;  
            this.range.collapse(true);  
            this.range.select();
        }  
        else{
            if(this.getType()=='HTMLDivElement'){
                this.element.innerHTML=this.element.innerHTML.substr(0,this.start)+text+this.element.innerHTML.substr(this.start);



//赋值1
            }else{

               this.element.text=this.element.value.substr(0,this.start)+text+this.element.text.substr(this.start);

//赋值2
            };
        } 
    },
    getText:function(){
        if (document.all){   //IE
            var r = document.selection.createRange();  
            document.selection.empty();  
            return r.text;  
        }  
        else{  //非IE
            if (this.element.selectionStart || this.element.selectionStart == '0'){
                var text=this.getType()=='HTMLDivElement'?this.element.innerHTML:this.element.value;
                return text.substring(this.element.selectionStart,this.element.selectionEnd); //截取开始到结束
            } 
            else if (window.getSelection){  
                return window.getSelection().toString();
            };  
        }  
    }
};
var c1,c2;
window.onload=function(){
   
    c2=new cursorControl(document.getElementById('editdiv'));
};

function fn2(str){
    c2.insertText(str);
};

function fn4(){
    alert(c2.getText());
}     
</script>  
</head>  
<body>  
 
    <input type = "button" value = "插入字符串" onclick="fn2('aaaaa');"/> <input type = "button" value = "获取选中的文本" onclick="fn4();"/><br />  <br /> 
    <div id="editdiv" contentEditable="true" style="width:600px; height:300px; border:1px solid blue">这里是一个可编辑层</div><br />     
</body>  
</html>

大牛回复：

        insertText: function (text) {
            this.element.focus();
            if (document.all) {
                document.selection.empty();
                this.range.text = text;
                this.range.collapse(true);
                this.range.select();
            }
            else {
                var sel = window.getSelection(), rng = sel.getRangeAt(0);
                rng.deleteContents();
                var node = document.createTextNode(text)
                rng.insertNode(node);
                sel.collapse(node, text.length);
              /*
                if (this.getType() == 'HTMLDivElement') {
                    this.element.innerHTML = this.element.innerHTML.substr(0, this.start) + text + this.element.innerHTML.substr(this.start);



                    //赋值1
                } else {

                    this.element.text = this.element.value.substr(0, this.start) + text + this.element.text.substr(this.start);

                    //赋值2
                };*/
            }
        },

楼主可以好好研究下标准浏览器的range和selection对象

https://developer.mozilla.org/en-US/docs/Web/API/Selection https://developer.mozilla.org/en-US/docs/Web/API/Range