iframe从光标处插入图片

javascript

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

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

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

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

相关资料

-- EOF --