小小的富文本框，却包含挺多内容的，总结如下。javascript富文本框

小小的富文本框，却包含挺多内容的，总结如下。

1.设置iframe为可编辑状态

repy_iframe.document.designMode="On";

2. 向iframe插入图片

function set_img(n){
repy_iframe.focus();
//两种方式向iframe插入表情
//第1种
//var oRange = repy_iframe.document.selection.createRange(); //得到光标当前选择文本
//oRange.pasteHTML(document.getElementById("img_"+n).innerHTML);//插入表情 缺点在于会带入url完整路径，类似：http://localhost:8080/images/face2/132.gif
//设置iframe中选中的文本格式
//oRange.execCommand("Bold");//加粗
//参考:http://www.blueidea.com/tech/web/2003/1242.asp
//第2种
repy_iframe.document.execCommand("InsertImage",false,"<?=dirname("http://$_SERVER[HTTP_HOST]$_SERVER[PHP_SELF]")?>/images/face2/"+n+".gif");
//只显示相对路径，不会显示完整路径，类似：images/face2/132.gif.但是拖动图片后会自动加入about:,使图片无法正常浏览,类似:src="about:images/1.gif",所以先插入完整路径,然在提交表单时替换掉url前缀或是在后台保存操作时替换掉url前缀
//php code：$memo=str_replace(dirname("http://$_SERVER[HTTP_HOST]$_SERVER[PHP_SELF]")."/","",$_POST["memo"]);
}

3.保存iframe光标位置
当光标离开iframe再进入时默认写入内容是在页面最前面，所以要记录光标的位置,貌似如果选择的不是文字,例如图像域的话,无法保存

<iframe id="repy_iframe" src="about:blank" onbeforedeactivate="iframe_l();" onactivate="iframe_g();"></iframe>

var ieSelectionBookmark ;
function iframe_l(){ //记录IE的编辑光标
var contentWindow = document.getElementById('repy_iframe').contentWindow;
var range = contentWindow.document.selection.createRange();
ieSelectionBookmark = range.getBookmark();
};

function iframe_g() { //复位IE的编辑光标
if(ieSelectionBookmark){
var contentWindow = document.getElementById('repy_iframe').contentWindow;
var range = contentWindow.document.body.createTextRange();
range.moveToBookmark(ieSelectionBookmark);
range.select();
ieSelectionBookmark = null;
}
}

4.屏蔽iframe的onpaste事件（防止粘贴恶意代码）

iframe加入< iframe onload="_iframeOnload()">
<script>

function _iframeOnload(){
targetDoc = document.frames.repy_iframe.document;
targetDoc.f=function(e){proxyEvent(e);};
with(targetDoc.body){
attachEvent("onpaste",function(event){document.f(event)});
attachEvent("onpaste",function(event){fnPaste(event)});
}
repy_iframe.document.designMode='On';
}
function proxyEvent(e){
switch(e.type){
case "paste":
fnPaste(e);
break;
}
}
function fnPaste(e) {

e.returnValue = false;
//targetDoc.execCommand('paste');
//var shtml= GetClipboardHTML();
var shtml=clipboardData.getData("Text"); //安全起见,只取纯文本
//targetDoc.execCommand("paste");
repy_iframe.document.selection.createRange().pasteHTML(shtml) ;//把文本粘贴进iframe
}

</script>

参考资源：

编辑器（一）document.selection.createRange用法
http://blog.zol.com.cn/822/article_821065.html
用javascript做html编辑器
http://hi.baidu.com/zhujinhua/blog/item/1eff4f43fd1b8f109213c6d5.html
关于iframe编辑的高难度问题，快来看看吧
http://topic.csdn.net/t/20040904/23/3341021.html
怎样将iframe变成论坛发帖输入框？
http://topic.csdn.net/t/20050130/22/3764564.html
document.execCommand() 解析
http://www.blueidea.com/tech/web/2003/1242.asp
关于163的在线编辑器的使用
http://topic.csdn.net/u/20081222/15/01d9945c-dc90-421c-8298-ad403e7fdb8e.html
pasteHTML的用法
http://hi.baidu.com/lkjia/blog/item/82d3978f476cdff8503d9230.html
HTML可视化编辑器中IE丢失光标位置的问题
http://hi.baidu.com/jindw/blog/item/8c3e928ba1f04dd0fc1f10d2.html
HTML可视化编辑器中IE丢失光标位置的问题
http://www.mockte.com/rewrite.php/read-29.html
能否控制iFrame中的onpaste事件
http://topic.csdn.net/t/20050719/17/4154812.html
http://topic.csdn.net/t/20041119/01/3567122.html
IFRAME onpaste
http://www.dzend.com/article.asp?id=69
如何实现在IFRAME里粘贴时，粘贴在当前光标所在位置?
http://topic.csdn.net/t/20030325/18/1575482.html