<!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>
<style type="text/css">
body{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
/*border:1px green dashed;*/
}
.border{
border:1px solid gray;
padding:1px;
cursor:pointer;
font-size:12px;
text-align:center;
vertical-align:middle;
}
.ge{
width:10px;
}
</style>
<script language="javascript">
var txt = "";
var t = "";
window.onload = function(){
editconfig();
EditArea.document.body.contentEditable="true";
EditArea.focus();
edit();
}
function $(id){
return document.getElementById(id);
}
function code(){
if(t == "c") return;
txt = EditArea.document.body.innerHTML;
EditArea.document.body.innerText = txt;
tag.innerHTML = "当前为代码模式";
EditArea.focus();
t = "c";
}
function edit(){
if(t == "e") return;
txt = EditArea.document.body.innerText;
EditArea.document.body.innerHTML = txt;
tag.innerHTML = "当前为设计模式";
EditArea.focus();
t = "e";
}
function adding(){
var i = parseInt($("EditArea").style.height) + 100;
$("EditArea").style.height = i;
try{
parent.document.getElementById("xF").style.height = parseInt(parent.document.getElementById("xF").style.height)+100;
}
catch(e)
{
//alert(e.message);
}
}
function subtract(){
var i = parseInt($("EditArea").style.height) - 100;
if(i <= 0) return;
$("EditArea").style.height = i;
try{
parent.document.getElementById("xF").style.height = parseInt(parent.document.getElementById("xF").style.height)-100;
}
catch(e)
{
//alert(e.message);
}
}
function editconfig(){
try{
var x = parseInt(parent.document.getElementById("xF").style.width);
var y = parseInt(parent.document.getElementById("xF").style.height);
$("EditArea").style.width = x-5;
$("EditArea").style.height = y-30;
}
catch(e)
{
//alert(e.message);
}
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><iframe id="EditArea" name="EditArea" src="body.html" frameborder="0" scrolling="auto" style="width:600px;height:100px;border:1px solid gray;"></iframe></td>
</tr>
<tr>
<td style="position:relative; text-align:left; vertical-align:top;"><div style="position:absolute; top:5px; left:0px; width:160px;"><a class="border" id="btnHtml" onclick="edit()">设计模式</a> <a class="border" id="btnText" onclick="code()">代码模式</a></div>
<div id="tag" style="position:absolute; top:7px; left:130px; color:red; font-size:12px;"></div>
<div style="position:absolute; top:5px; right:0px;"><a onclick="adding()" style="cursor:pointer;" title="增高">＋</a> <a onclick="subtract()" style="cursor:pointer;" title="减少">－</a></div></td>
</tr>
</table>
</body>
</html>
test.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" />
<title>test my documents</title>
<script language="javascript">
function chk(){
xF.document.getElementById("btnHtml").click();
var str = xF.EditArea.document.body.innerHTML;
form1.x.value = str;
if(form1.x.value == ""){
alert("请输入内容");
xF.EditArea.focus();
return false;
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="chk.asp" onsubmit="return chk();">
<input name="x" type="hidden" id="x" value="" />
<iframe id="xF" src="index.html" frameborder="0" scrolling="auto" style="width:800px; height:200px; border:1px dashed #f5f5f5;"></iframe>
<br /><input type="submit" name="Submit" value="提交" />
</form>
</body>
</html>
chk.asp『处理页面，接收传过来的值』
<mailto:%@" CODEPAGE="936"%>
<!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>test</title>
</head>
<body>
<%=Request.Form("x")%>
</body>
</html>
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" />
<title>无标题文档</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12px;
}
body {
margin: 0px;
padding:5px;
line-height:18px;
color:black;
height:90%;
}
-->
</style>
</head>
<body>
</body>
</html>
0
168
1.46MB
2010-06-28
0
