FireFox、IE得到iframe编辑框的光标位置并插入图片

最新推荐文章于 2024-05-20 20:00:00 发布

blueEast

最新推荐文章于 2024-05-20 20:00:00 发布

阅读量336

点赞数

文章标签： iframe html ie javascript ViewUI

本文链接：https://blog.csdn.net/blueEast/article/details/84183076

版权

(转)FireFox、IE得到iframe编辑框的光标位置并插入图片
2010-12-18 14:29

在制作html编辑器，有些时候iframe编辑器需要在光标处插入图片。firefox和ie有差别的。如下：

//FireFox

var obj = document.getElementByIdx_x_x("SendMsg");//iframe框架的

var win = obj.contentWindow;
var sel=win.getSelection(),rng=sel.getRangeAt(0),frg=rng.createContextualFragment(要在光标处插入的内容);
rng.insertNode(frg);

//IE

var obj = document.frames("SendMsg");
obj.focus();
var range =obj.document.selection.createRange();
var str1="要在光标处插入的内容";
range.pasteHTML(str1);

参考：http://www.code-design.cn/blogdetail2641.html

<!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=gb2312" />
<title>HTML编辑失去焦点后在原来光标位置插入信息/图片--编程设计网</title>
</head>
<body>
　　<br ><iframe style="width:300px;height:200px" id="editor"></iframe>
　　<br >内容：<input type="text" id="txt" οnmοusedοwn="SaveRange()" /><input type="button" οnclick="insert()" οnmοusedοwn="SaveRange()" value="插入输入的字符在HTML编辑器原位置" />
　　<script type="text/javascript">
　　var isIE=!!document.all,ieRange=false,editor,win,doc,txt;
　　window.οnlοad=function(){
　　 editor=document.getElementByIdx_x('editor');
　　 win=editor.contentWindow;
　　 doc=win.document;
　　 txt=document.getElementByIdx_x('txt');　　
　　 doc.designMode='On';//可编辑
　　 win.focus();
　　}
　　function SaveRange(){//IE下保存Range对象
　　 if(isIE&&!ieRange){//是否IE并且判断是否保存过Range对象
　　 var sel=doc.selection;
ieRange=sel.createRange();
if(sel.type!='Control'){//选择的不是对象
var p=ieRange.parentElement();//判断是否在编辑器内
if(p.tagName=="INPUT"||p==document.body)ieRange=false;
　　 }
　　 }
　　}
　　function insert(){
　　 if(txt.value==''){alert('请输入内容！'); txt.focus();return false;}
　　 if(ieRange){
　　 ieRange.pasteHTML(txt.value);
　　 txt.value='';
　　 ieRange.select();ieRange=false;//清空下range对象
　　 }
　　 else{//焦点不在html编辑器内容时
　　 win.focus();
　　 if(isIE)doc.body.innerHTML+=txt.value;//IE插入在最后
　　 else{//Firefox
　　 var sel=win.getSelection(),rng=sel.getRangeAt(0),frg=rng.createContextualFragment(txt.value);
　　 rng.insertNode(frg);
　　 }
　　 }
　　}
　　</script>
</body>
</html>

blueEast

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FireFox、IE得到iframe编辑框的光标位置并插入图片

(转)FireFox、IE得到iframe编辑框的光标位置并插入图片2010-12-18 14:29 在制作html编辑器，有些时候iframe编辑器需要在光标处插入图片。firefox和ie有差别的。如下： //FireFoxvar obj = document.getElementByIdx_x_x("SendMsg");//iframe框架的var win...
复制链接

扫一扫