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,兼容IE
editPane=edit.contentDocument|| edit.contentWindow.document;
editPane.designMode="on";
editPane.open();
editPane.write('编辑区
');
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++)
{
//获取子节点的名称是否等于span
if(p[l].children[a].tagName.toLowerCase()==="span")
{
//检查span是否有style特征，如果有则删除style
var 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;
//创建文本的url
case "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>
//最后实现的样式
