第一步在这里:user1/9/archives/2006/2614.html
第二步呢,换成了JavaScript了,用execCommand可以完成的东西,经常要用到的都加上了,把div换了iframe了,使用iframe,可以在同一个位置显示设计和代码模式
<html>
<body>
<center>
<div unselectable="on" align="center" style="height:360; width:400; background-color:menu; border:outset menu">
<br>
<iframe name="wood_content" id="wood_content" width="350" height="250"></iframe>
<br>
<input type="button" value="粗体" unselectable="on" onclick="deal('Bold');">
<input type="button" value="斜体" unselectable="on" onclick="deal('Italic');">
<input type="button" value="下划线" unselectable="on" onclick="deal('Underline');">
<input type=button value="黑体" onclick="deal('FontName');">
<input type=button value="9号字" onclick="deal('FontSize');">
<input type=button value="红色字" onclick="deal('ForeColor');">
<br>
<input type=button value="上标" onclick="deal('superscript');">
<input type=button value="下标" onclick="deal('subscript');">
<br>
<input type=button value="左对齐" onclick="deal('justifyleft');">
<input type=button value="居中" onclick="deal('justifycenter');">
<input type=button value="右对齐" onclick="deal('justifyright');">
<input type=button value="编号" onclick="deal('insertorderedlist');">
<input type=button value="项目符号" onclick="deal('insertunorderedlist');">
<br>
<input type=button value="撤消" onclick="deal('Undo');">
<input type=button value="重做" onclick="deal('Redo');">
<input type=button value="删除" onclick="deal('Delete');">
<input type=button value="剪切" onclick="deal('Cut');">
<input type=button value="拷贝" onclick="deal('Copy');">
<input type=button value="粘贴" onclick="deal('Paste');">
<br>
<input type=button value="刷新" onclick="deal('refresh');">
<input type=button value="停止" onclick="deal('stop');">
<input type=button value="另保存" onclick="deal('SaveAs');">
<br>
<input type="button" value="设计" onclick="changemode(1);">
<input type="button" value="HTML" onclick="changemode(2);">
</div>
</center>
<form name="form1">
<input type="button" value="取文本,用来存到数据库里面" onclick='getcontent();'>
<br>
<textarea name="mytext" cols="50" rows="10"></textarea>
</form>
<script language = "javaScript" type="text/javascript">
//设置全局变量IframeID,设置他可编辑
var IframeID=document.getElementById("wood_content").contentWindow;
IframeID.document.designMode="On"
//设置html编辑器当前是在设置模式下
var mode=1;
function deal(s)
{
//各种操作
switch(s)
{
case "Bold":
IframeID.document.execCommand("Bold"); IframeID.focus();
break;
case "Italic":
IframeID.document.execCommand("Italic"); IframeID.focus();
break;
case "Underline":
IframeID.document.execCommand("Underline"); IframeID.focus();
break;
case "FontName":
IframeID.document.execCommand('FontName',false,'黑体');
break;
case "superscript":
IframeID.document.execCommand("superscript"); IframeID.focus();
break;
case "subscript":
IframeID.document.execCommand("subscript"); IframeID.focus();
break;
case "FontSize":
IframeID.document.execCommand('FontSize',false,9);
break;
case "justifyleft":
IframeID.document.execCommand("justifyleft"); IframeID.focus();
break;
case "justifycenter":
IframeID.document.execCommand("justifycenter"); IframeID.focus();
break;
case "justifyright":
IframeID.document.execCommand("justifyright"); IframeID.focus();
break;
case "insertorderedlist":
IframeID.document.execCommand("insertorderedlist"); IframeID.focus();
break;
case "insertunorderedlist":
IframeID.document.execCommand("insertunorderedlist"); IframeID.focus();
break;
case "ForeColor":
IframeID.document.execCommand('ForeColor',false,'#ff0000');
break;
case "Undo":
IframeID.document.execCommand('Undo');
break;
case "Redo":
IframeID.document.execCommand('Redo');
break;
case "Delete":
IframeID.document.execCommand('Delete');
break;
case "Cut":
IframeID.document.execCommand('Cut');
break;
case "Copy":
IframeID.document.execCommand('Copy');
break;
case "Paste":
IframeID.document.execCommand('Paste');
break;
case "refresh":
IframeID.document.execCommand('refresh',false,0);
break;
case "stop":
IframeID.document.execCommand('stop');
break;
case "SaveAs":
IframeID.document.execCommand('SaveAs');
break;
}
}
function changemode(i)
{
//改变模式,i==1:设计模式;i==2:html模式
if(i==1)
{
if(mode!=1)
{
IframeID.document.body.innerHTML=IframeID.document.body.innerText;
mode=1;
}
}
else
{
if(mode!=2)
{
IframeID.document.body.innerText=IframeID.document.body.innerHTML;
mode=2;
}
}
}
function getcontent()
{
//取内容用来存到数据库里面
if(mode==1)
{
form1.mytext.value="/IframeID.document.body.innerHTML;
}
else
{
form1.mytext.value=IframeID.document.body.innerText;
}
}
</script>
</body>
</html>