使用IFrame框架做成文本編輯器。
需要兩個頁面：default.html和editInfo.aspx頁面，其中default.aspx作爲主控頁面，editInfo.html作爲編輯頁面。
default.aspx頁面中要包括一個iframe框架，以包含編輯頁面。
下面給出兩個頁面的代碼：
default.aspx -------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Visual Studio 2005 WEB控件功能說明及演示</title>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
<!--
function ShowExample(pageName)
{
document.getElementById('examplePage').src = "WebControlExample/" + pageName + ".aspx";
}
// 將IFrame包含的頁面設置爲可編輯
function ToLoad()
{
document.getElementById("examplePage").contentWindow.document.body.contentEditable = true;
}
// 將編輯頁面中的內容顯示到文本框中
function ToShowTextFromIFrame()
{
document.getElementById("SaveText").value = document.getElementById("examplePage").contentWindow.document.body.innerText;
}
// 將編輯頁面中的HTML代碼顯示到文本框中
function ToShowHTMLFromIFrame()
{
document.getElementById("SaveHTML").value = document.getElementById("examplePage").contentWindow.document.body.innerHTML;
}
// 將文本框中的內容寫入編輯頁面中
function ToWriteTextToIFrame()
{
document.getElementById("examplePage").contentWindow.document.body.innerText = document.getElementById("WriteText").value;
}
// 將文本框中的HTML代碼寫入編輯頁面中
function ToWriteHTMLToIFrame()
{
document.getElementById("examplePage").contentWindow.document.body.innerHTML = document.getElementById("WriteHTML").value;
}
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<iframe id="examplePage" src="comm/fristpage.html" style="width: 100%; height: 100%"
scrolling="auto" οnlοad="ToLoad();"></iframe>
<input id="SaveText" type="text" /><input type="button" id="bttnSaveText" value="顯示IFrame文本"
οnclick="ToShowTextFromIFrame();" />
<input id="WriteText" type="text" /><input type="button" id="bttnWriteText" value="寫入IFrame文本"
οnclick="ToWriteTextToIFrame();" />
<br />
<input id="SaveHTML" type="text" /><input type="button" id="bttnSaveHTML" value="顯示IFrameHTML文本"
οnclick="ToShowHTMLFromIFrame();" />
<input id="WriteHTML" type="text" /><input type="button" id="bttnWriteHTML" value="寫入IFrameHTML文本"
οnclick="ToWriteHTMLToIFrame();" />
</form>
</body>
</html>
editInfo.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 runat="server">
<title>無標題頁</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 100%; height: 100%">
<tr>
<td align="center" valign="middle">
Hello everyone !</td>
</tr>
</table>
</div>
</form>
</body>
</html>
注意：編輯頁面最好選用HTML的靜態頁面，如果選用動態頁面的話，編輯頁面被設置爲可編輯後將會自動增加一個文本框以保存StateView內容。