使用IFrame编辑文本

最新推荐文章于 2023-02-17 11:06:33 发布

iteye_20954

最新推荐文章于 2023-02-17 11:06:33 发布

阅读量151

点赞数

文章标签： CSS HTML JavaScript XHTML 框架 ViewUI

使用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" />

// 将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">

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>