javascript制作简单的富文本，基本功能都实现，除了上传图片只能用URL

//所有的图标用的字符，以后可以换成网上的css-icon图标库的图标，再设置一下css样式即可简单的使用
//这里所有的标签元素都是直接获取，没有使用委托，如果使用委托性能会更好，这里只做了简单的清理，让内存回收

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"></html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link type="text/css" href="public/css/test.css" rel="stylesheet"/><script type="text/javascript" src="common.js"></script><title>制作富文本的测试页面</title><style type="text/css">#containerIframe{width: 600px;height: 600px;margin: 0 auto;margin-top: 10px;font-size: 1em;border: 1px solid #ccc;}#containerIframe #toolbar {height: 30px;background-color: #C0C0C0;width: 100%;}#toolbar a{margin-right: 2px;margin-left: 5px;line-height: 1.95em;font-size: 0.875em;}#toolbar a:link{text-decoration: none;color: #333333;}#heading{list-style: none;margin: 0;padding: 0;font-size: 1em;position: relative;top: 0px;left: 55px;width: 30px;background-color: #ccc;}#heading li{width: 25px;height: 20px;text-align: center;}.clear {clear:both;}</style></head><body><div id="containerIframe"><div id="toolbar"><a href="Javascript:void(0)" data-type="B" title="字符加粗">B</a><a href="Javascript:void(0)" data-type="I" style="font-style:italic" title="斜体">I</a><a href="Javascript:void(0)" data-type="U" style="text-decoration:underline" title="字符下划线">U</a><a href="Javascript:void(0)" data-type="H" title="标题">H</a><a href="Javascript:void(0)" data-type="left" title="字符居左">左</a><a href="Javascript:void(0)" data-type="center" title="字符居左">中</a><a href="Javascript:void(0)" data-type="right" title="字符居右">右</a><a href="Javascript:void(0)" data-type="P" title="插入段落">P</a><a href="Javascript:void(0)" data-type="indent" title="缩进文本">缩</a><a href="Javascript:void(0)" data-type="outdent" title="减少缩进">凸</a><a href="Javascript:void(0)" data-type="forecolor" title="文本颜色">色</a><a href="Javascript:void(0)" data-type="removeformat" title="删除粘贴样式">清理</a><a href="Javascript:void(0)" data-type="createlink" title="创建URL">URL</a><a href="Javascript:void(0)" data-type="unlink" title="删除URL">删除URL</a><a href="Javascript:void(0)" data-type="ollist" title="有序排列">有序</a><a href="Javascript:void(0)" data-type="lilist" title="无序排列">无序</a><a href="Javascript:void(0)" data-type="image" title="插入图片">图片</a><ul id="heading" style="display:none;"><li><a href="Javascript:void(0)" data-type="h1">h1</a></li><li><a href="Javascript:void(0)" data-type="h2">h2</a></li><li><a href="Javascript:void(0)" data-type="h3">h3</a></li><li><a href="Javascript:void(0)" data-type="h4">h4</a></li><li><a href="Javascript:void(0)" data-type="h5">h5</a></li></ul></div> <iframe name="richedit" style="height:100%;width:100%;" src="" frameborder="0" allowTransparencty="true" id="edit" scrolling="no"></iframe>     <input type="submit" name="submit1" value="提交" />   </div><script type="text/javascript">//获取到iframe框架var edit=document.getElementById("edit");//这句是获取到iframe框架下的文档document或window,兼容IEeditPane=edit.contentDocument|| edit.contentWindow.document;editPane.designMode="on";editPane.open();editPane.write('<p color="black" size=+0.7 class="editor">编辑区</p>');editPane.close();//工具标签var toolbar=document.getElementById("toolbar");//获取工具标签下面所有的a标签var a=toolbar.getElementsByTagName("a");var heading=document.getElementById("heading");for(var i=0,len=a.length;i<len;i++){//循环得到特征data-type的值switch(a[i].getAttribute("data-type")){case "B": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("Bold",false,null);});break;case "I": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("italic",false,null);});  break;case "U": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("underline",false,null);}); break;case "H": EventUtil.addHandler(a[i],"click",function(){if(heading.style.display=="none"){heading.style.display="block";}else{heading.style.display="none";}//循环H标签的菜单，点击谁则相应的设置成谁var ha=heading.getElementsByTagName("a");for(var j=0,leng=ha.length;j<leng;j++){switch(ha[j].getAttribute("data-type")){case "h1": EventUtil.addHandler(ha[j],"click",function(){var format=editPane.queryCommandValue("formatBlock");console.log(format);if(format.toLowerCase()==="p"){editPane.execCommand("formatBlock",false,"h1");}else{editPane.execCommand("formatBlock",false,"p");}heading.style.display="none";});break;case "h2": EventUtil.addHandler(ha[j],"click",function(){var format=editPane.queryCommandValue("formatBlock");if(format.toLowerCase()==="p"){editPane.execCommand("formatBlock",false,"h2");}else if(format.toLowerCase()==="h1" || format.toLowerCase()==="h3" ||format.toLowerCase()==="h4"||format.toLowerCase()==="h5"){editPane.execCommand("formatBlock",false,"h2");}else{editPane.execCommand("formatBlock",false,"p");}heading.style.display="none";});break;  case "h3": EventUtil.addHandler(ha[j],"click",function(){var format=editPane.queryCommandValue("formatBlock");if(format.toLowerCase()==="p"){editPane.execCommand("formatBlock",false,"h3");}else{editPane.execCommand("formatBlock",false,"p");}heading.style.display="none";});break;case "h4": EventUtil.addHandler(ha[j],"click",function(){var format=editPane.queryCommandValue("formatBlock");if(format.toLowerCase()==="p"){editPane.execCommand("formatBlock",false,"h4");}else{editPane.execCommand("formatBlock",false,"p");}heading.style.display="none";});break;case "h5": EventUtil.addHandler(ha[j],"click",function(){var format=editPane.queryCommandValue("formatBlock");if(format.toLowerCase()==="p"){editPane.execCommand("formatBlock",false,"h5");}else{editPane.execCommand("formatBlock",false,"p");}heading.style.display="none";});break;}}ha=null;}); break;case "left": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("JustifyLeft",false,null);}); break; case "center": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("JustifyCenter",false,null);}); break; case "right": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("JustifyRight",false,null);}); break;  case "P": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("insertparagraph",false,"p");}); break; //增加缩进 case "indent": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("indent",false,null);}); break;  //减少缩进  case "outdent": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("outdent",false,null);}); break;//为字体设置颜色，这里只设置了红色，以后可以像h标签一样添加case "forecolor": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("forecolor",false,"red");}); break;//清除粘贴过来的样式，和自己设置的模式  case "removeformat": EventUtil.addHandler(a[i],"click",function(){//首先获取到范围内的p元素标签有多少个var p=editPane.getElementsByTagName("p");//循环p元素for(var l=0,leng=p.length;l<leng;l++){//检查P元素下面是否有子节点if(p[l].children.length>0){//循环子节点for(var a=0,lengg=p[l].children.length;a<lengg;a++){//获取子节点的名称是否等于spanif(p[l].children[a].tagName.toLowerCase()==="span"){//检查span是否有style特征，如果有则删除stylevar att=p[l].children[a].getAttribute("style");if(att){p[l].children[a].removeAttribute("style");}//继续循环，因为清理时一般都会按多次，这里就是多次清理continue;}else{editPane.execCommand("removeformat",false,"span");}}//如果没有子节点则直接清理p标签的style}else{if(p[l].getAttribute("style")){p[l].removeAttribute("style");}}}editPane.execCommand("removeformat",false,"style");p=null;}); break; //创建文本的urlcase "createlink": EventUtil.addHandler(a[i],"click",function(){var result=prompt("输入你的本地URL或外链","");if(result !==null){editPane.execCommand("createlink",false,result);}}); break;  //清除url连接case "unlink": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("unlink",false,null);}); break;//有序排列 case "ollist": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("insertorderedlist",false,null);}); break;  //无序排列  case "lilist": EventUtil.addHandler(a[i],"click",function(){editPane.execCommand("insertunorderedlist",false,null);}); break;//插入图片，占时只能插入图片的URL，本地上传用xrh还未做case "image": EventUtil.addHandler(a[i],"click",function(){var result=prompt("输入你的图片连接","");if(result !==null){editPane.execCommand("insertimage",false,result);}}); break;  }}//模拟将iframe框架中格式化的文本赋值给表单的字段，以便存入数据库var button=document.getElementsByName("submit1")[0];EventUtil.addHandler(button,"click",function(){var text=editPane.body.innerText;console.log(text);});edit=null;toolbar=null;a=null;</script></body>
</html>