在可编辑div中插入文字或图片（二）

<!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>光标控制器</title>  
<script type="text/javascript">
function cursorControl(a){
    this.element=a;
    this.range=!1;
    this.start=0;
    this.init();
};
cursorControl.prototype={
    init:function(){
        var _that=this;
        this.element.onkeyup=this.element.onmouseup=function(){
            this.focus();
            if(document.all){
                _that.range=document.selection.createRange();
            }else{
                _that.start=_that.getStart();
            }
        }
    },
    getType:function(){
        return Object.prototype.toString.call(this.element).match(/^\[object\s(.*)\]$/)[1];
    },
    getStart:function(){
        if (this.element.selectionStart || this.element.selectionStart == '0'){  
            return this.element.selectionStart; 
        }
		
//		else if (window.getSelection){  
//            var rng = window.getSelection().getRangeAt(0).cloneRange();  
//            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();  
            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);
				// Begain of The Content added by bedweather 
				var sel = window.getSelection();
				var rang = sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
				if (rang == undefined 
					|| rang == null
					|| (rang.commonAncestorContainer.id !="editdiv"
						&& rang.commonAncestorContainer.parentNode.id !="editdiv")){
					this.element.focus();
					rang = document.createRange();
					rang = selectNode(this.element);
					rang.setStart(range.getEndContainer, rang.endOffset);
				}
				rang.deleteContents();
				rang.insertNode(rang.createContextualFragment(text));
				var tempRange = document.createRange();
				var a = document.getElementById("editdiv")
				tempRange.selectNodeContents(a);
				if(rang.commonAncestorContainer.id == "editdiv"){
					tempRange.setStart(rang.endContainer, rang.endOffset+1);
					tempRange.setEnd(rang.endContainer, rang.endOffset+1);
				} else {
					tempRange.setStartAfter(rang.endContainer.nextSibling);
					tempRange.setEndAfter(rang.endContainer.nextSibling);
				}
				sel.removeAllRanges();
				sel.addRange(tempRange);
				this.element.focus();
				// End of The Content added by bedweather 

            }else{
                this.element.value=this.element.value.substr(0,this.start)+text+this.element.value.substr(this.start);
            };
        } 
    },
    getText:function(){
        if (document.all){  
            var r = document.selection.createRange();  
            document.selection.empty();  
            return r.text;  
        }  
        else{  
            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(){
    c1=new cursorControl(document.getElementById('text'));
    c2=new cursorControl(document.getElementById('editdiv'));
};
function fn1(str){
    c1.insertText(str);
};
function fn2(str){
    c2.insertText(str);
};
function fn3(){
    alert(c1.getText());
};
function fn4(){
    alert(c2.getText());
}     
</script>  
</head>  
<body>  
    <input type = "button" value = "插入字符串 {文本1}" onclick="fn1('{文本1}');"/><input type = "button" value = "获取选中的文本" onclick="fn3();"/><br />  <br />
    <textarea id="text" cols="50" rows="5">这里是文本框</textarea><br /><br />  
    <input type = "button" value = "插入字符串 {文本2}" onclick="fn2('{文本2}');"/> <input type = "button" value = "获取选中的文本" onclick="fn4();"/><br />  <br /> 
	<input type = "button" value = "插入图片" onclick="fn2('<img src=\'76a196bdgw1e1d9emb7iyj.jpg\'/>');"/> <input type = "button" value = "获取选中的文本" onclick="fn4();"/><br />  <br />
    <div id="editdiv" contentEditable="true">这里是一个可编辑层</div><br />     
</body>  
</html>
源地址 https://bbs.csdn.net/topics/390259711
在可编辑div中插入文字或图片（二）

猜你喜欢
