最近因为工作原因,需要一个所见即所得的编辑器,功能不需要太强大,够用就行。在网上搜索了下,有好几种解决方案,结合我自 己的情况,最终选择了iframe,修改了下网上的代码,简单的测试代码也贴出来。自己存档,也希望对大家有帮助。 兼容IE6,IE7,IE8,firefox,chrome。
<h2>第一部分:设置一个可编辑的iframe。</h2> 1.首先网页上要有一个iframe对象
<!-- lang:html-->
<iframe id=”HtmlEdit” style=”border:1px solid black; height:100%” name=”HtmlEdit”></iframe>
2.得到iframe对象的document IE与其他浏览器不一样,为了兼容,我们要做一个判断
<!-- lang:js-->
if(isIE)
{
iframedoc = window.frames["HtmlEdit"].document;
}
else
{
iframedoc = window.frames["HtmlEdit"].window.document;
}
3.打开document,初始化iframe,这步是为了兼容firefox。
<!-- lang :js-->
iframedoc.open();
iframedoc.write(‘<html><head><mce:style type=”text/css”><style type=”text/css” mce_bogus=”1″>body
{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>’);
4.打开document的编辑模式
<!-- lang:js -->
iframedoc.designMode=’on’;
<h2>第二部分:编辑操作</h2> 做完第一部分后,已经可以在iframe中自由的输入文本了。然后就可以开始编辑。编辑时用的是*execCommand()*方法。
使用方法如下:
<!-- lang:js -->
iframedoc.execCommand(‘bold’, false,”");
iframedoc.execCommand(‘FontName’, false, value);
execCommand还有很多功能,具体的大家网上搜一下一大把,就不相信介绍了。最后,贴下完整的测试代码:
<!-- lang: 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=utf-8″ />
<title>无标题文档</title>
<script type=”text/javascript”>
var isIE = document.all ? true : false;
var iframedoc;
function init()
{
//获取iframe的document
if(isIE)
{
iframedoc = window.frames["HtmlEdit"].document; //.designMode=’on’;
}
else
{
iframedoc = window.frames["HtmlEdit"].window.document; //.designMode=’on’;
}
iframedoc.open();
iframedoc.write(‘<html><head><mce:style type=”text/css”><style type=”text/css” mce_bogus=”1″>body
{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>’);
iframedoc.designMode=’on’;
}
function getdocvalue()
{
var body = iframedoc.body || iframedoc.documentElement;
var content = body.innerHTML;
return content;
}
function setBold()
{
iframedoc.execCommand(‘bold’, false,”");
}
function setitalic()
{
iframedoc.execCommand(‘italic’, false,”");
}
function setfontfamily(value)
{
iframedoc.execCommand(‘FontName’, false, value);
}
function setfontsize(value)
{
iframedoc.execCommand(‘FontSize’, false, value);
}
</script>
</head>
<body onload=”init()”>
<div id=”test” style=”width:300px; height:30px;”>
<iframe id=”HtmlEdit” style=”border:1px solid black; height:100%” name=”HtmlEdit”></iframe>
</div>
<input type=”button” value=”getvalue” onclick=”alert(getdocvalue())”/>
<input type=”button” value=”setbold” onclick=”setBold()”/>
<input type=”button” value=”setitalic” onclick=”setitalic()”/>
选择字体
<select name=”select” onchange=”setfontfamily(this.value)”>
<option value=”simsun”>宋体</option>
<option value=”simhei”>黑体</option>
<option value=”Arial”>Arial</option>
</select>
字体大小
<select name=”select” onchange=”setfontsize(this.value)”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
</select>
</body>
</html>