iframe从光标处插入图片

Posted on Edited on In

最近改了一个很久之前的编辑器的bug：ie浏览器不能在光标处插入图片，记录在此。

编辑器很古老，代码混乱，是通过开启iframe的document.designMode='on'来实现编辑的。

首先需要在iframe加载之后开启designMode，后监听mouseup和keyup事件来记录光标位置(切记要在designMode开启之后监听，不然ie上面是监听不到的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
var addEvent = (function(){
	if(document.addEventListener){
		return function(type, el, fn){
			el.addEventListener(type, fn, false);
		}
	}else if(document.attachEvent){
		return function(type, el, fn){
			el.attachEvent('on' + type, fn);
		}
	}else{
		return function(type, el, fn) {
        	el['on' + type] = fn;
        }
	}
})();
	
var iframeNode = window.frames['editIframe'];
	
addEvent(iframeNode, 'load', function(){
	var iframeDoc = iframeNode.contentDocument || iframeNode.document;
		
	iframeDoc.designMode='on';

	addEvent(iframeDoc, 'mouseup', function(){
    	saveSelection();
    });
    addEvent(iframeDoc, 'keyup', function(){
        saveSelection();
    });
    	
    //获取和记录光标
    var currentRange, supportRange = typeof document.createRange === 'function';
    	
    function getCurrentRange() {
    	var selection, range;
    	if(supportRange){
    	   selection = iframeDoc.getSelection();
        	if (selection.getRangeAt && selection.rangeCount) {
            	range = iframeDoc.getSelection().getRangeAt(0);
        	}
    	}else{
        	range = iframeDoc.selection.createRange();
    	}
    	return range;
	}
		
	function saveSelection() {
    	currentRange = getCurrentRange();
	}
    	
    function restoreSelection() {
        if(!currentRange){
		      return;
		  }
		  var selection, range;
		  iframeDoc.body.focus();
		  if(supportRange){
		      selection = iframeDoc.getSelection();
		      selection.removeAllRanges();
		      selection.addRange(currentRange);
		  }else{
		      currentRange.select();
		  }
	}
		
	//插入图片
	function insertImg(html){
	   restoreSelection();
		iframeDoc.execCommand('insertImage', false, html);
		saveSelection();
	}	
});

相关资料