这是DIV
的页面
<!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></title>
</head>
<body bgcolor="#F8CAAB">
<!--textarea id="divdiv" rows="30" cols="60"></textarea-->
<div id="Wdiv" contenteditable="true" designMode="on">dfgds</div>
</body>
</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" />
<style type="text/css">
</style>
<title>js在线编辑器</title>
<script language="javascript">
var contenthtml;
function exeCommand(command,value){
document.execCommand(command,false,value);
}
///加粗
function pu(){
var obj=frames['showdiv'].Wdiv;
obj.focus();
}
function Black(){
pu();
exeCommand('Bold','')
}
///改变字体的代码
function Fontname(value){
pu();
exeCommand('Fontname',false,value)
}
////文字的大小
function FontSize(value){
pu();
exeCommand('FontSize',value);
}
function ForeColor(value){
pu();
exeCommand('ForeColor',value);
}
function mage(value){
pu();
ImagePath = window.prompt('请输入图片路径',value);
exeCommand('InsertImage',ImagePath);
}
///倾斜
function Italic(){
pu();
exeCommand('Italic','');
}
////查看源代码
function Source(){
var htmlContent=frames["showdiv"].Wdiv.innerHTML;
if(document.all.ifdiv.style.display=="block"){
document.all.ifdiv.style.display="none";
document.all.showhtml.style.display="block";
document.all.texthtml.value=htmlContent;
document.all.texthtml.focus();
document.all.Source.value="HTML";
}else {
document.all.ifdiv.style.display="block";
document.all.showhtml.style.display="none";
frames["showdiv"].Wdiv.innerHTML=document.all.texthtml.value;
frames["showdiv"].Wdiv.focus();
document.all.Source.value="查看源代码";
}
}
function check(){
var htmlContent=frames["showdiv"].Wdiv.innerHTML;
var v=window.open("")
v.document.write(htmlContent);
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#009933">
<tr bgcolor="#FFFFFF">
<td><select onchange="Fontname(this.value)" >
<option value="Verdana">宋体</option>
<option value="Arial">微软雅黑</option>
<option value="Helvetica">华文宋体</option>
<option value="sans-serif">楷体</option>
</select></td>
<td>
<select onchange="FontSize(this.value)">
<option value="3">一般</option>
<option value="5">中等</option>
<option value="7">特大</option>
</select>
</td>
<td>
<select onchange="ForeColor(this.value)">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="#FF9933">不知道</option>
</select>
</td>
<td><input type="button" value="加粗" onclick="Black()" />
</td>
<td><input type="button" onclick="Italic()" value="倾斜" /></td>
<td>
<input type="button" value="插入图片" onclick="mage('http://')"/>
</td>
</tr>
</table>
<div id="ifdiv" >
<iframe id="showdiv" src="editor.html" frameborder="0" scrolling="no"></iframe>
</div>
<div id="showhtml" >
<textarea id="texthtml" cols="50" rows="10"></textarea>
</div>
<div><span><input type="button" value="查看效果" onclick="check()" /></span>
<span><input type="button" name="Source" value="查看源代码" onclick="Source()" /></span>
</div>
</body>
</html>
我做一个在线编辑器,可是不知怎么的,无论怎么弄也兼容不 了火狐……在线等。