asp.net制作简单的文本编辑器【转】
大多数的在线文本编辑器都是使用JavaScript语言实现文本编辑的，本示例也是用JavaScript实现。文本的编辑区是通过使用Iframe框架来创建一个区域，并使用document对象中的designMode属性设置该区域为可编辑区域。designMode设置为On时，表示可编辑，为Off时表示不可编辑。
文本的编辑功能主要使用document对象的execCommand方法来实现，该方法执行一个命令。常用命令及说明如下表：
|
命令 |
说明 |
|
BackColor |
设置或获取当前选中区的背景色 |
|
Bold |
设置当前选中区为粗体 |
|
Copy |
将当前选中区复制到剪贴板 |
|
Cut |
将当前选中区复制到剪贴板并删除 |
|
CreateLink |
将当前选中区插入超链接，或显示一个对话框允许用户输入超链接的URL |
|
Delete |
删除当前选中区 |
|
FontName |
设置或获取当前选中区的字体 |
|
Italic |
设置当前选中区为斜体 |
|
FontSize |
设置或获取当前选中区的字体大小 |
|
FontColor |
设置或获取当前选中区前景（文本）颜色 |
|
Indent |
增加选中区的缩进 |
|
Outdent |
减少选中区的缩进 |
|
JustifyLeft |
设置当前选中区左对齐 |
|
justifyCenter |
设置当前选中区居中 |
|
justifyRight |
设置当前选中区右对齐 |
|
Underline |
设置当前选中区的下划线 |
示例代码如下所示：
（1）simpleEditor.aspx代码：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>文本编辑器</title>
<script language="javascript" type="text/javascript">
//设置编辑区域
function document.onreadystatechange()
{
txtArea.document.designMode="On";
}
//设置文字居左
function txtLeft()
{
txtArea.document.execCommand("justifyLeft");
}
//设置文字居中
function txtCenter()
{
txtArea.document.execCommand("justifyCenter");
}
//设置文字居右
function txtRight()
{
txtArea.document.execCommand("justifyRight");
}
//设置文字为粗体
function txtbold()
{
txtArea.document.execCommand("Bold");
}
//设置文字为斜体
function txtItalic()
{
txtArea.document.execCommand("Italic");
}
//设置文字字号
function txtFontName()
{
var txtSize=document.getElementById("Select1").value;
txtArea.document.execCommand("fontsize","",txtSize)
}
//设置文字下划线
function txtUnderline()
{
txtArea.document.execCommand("Underline");
}
//将文本保存到隐藏域中
function saveTxt()
{
var s =txtArea.document.body.innerHTML;
document.getElementById("hiddenText").value=s
}
</script>
</head>
<body style="text-align: center; font-size: 12pt;">
<form id="form1" runat="server">
<div>
<div style="text-align:center">
<table cellpadding="0" cellspacing="0" style="width:452px;height:361px;border:0;">
<tr>
<td>
字号<select id="Select1" onchange="txtFontName();" >
<option selected="selected" value="3">3</option>
<option value="5">5</option>
<option value="8">8</option>
</select></td>
<td><input id="btnBold" type="button" value="粗体" onclick="txtbold();" /></td>
<td><input id="btnItalic" type="button" value="斜体" onclick="txtItalic();" /></td>
<td><input id="btnUnder" type="button" value="下划线" onclick="txtUnderline();" /></td>
<td><input id="btnLeft" type="button" value="左对齐" onclick="txtLeft();" /></td>
<td><input id="btnCenter" type="button" value="居中" onclick="txtCenter();" /></td>
<td><input id="btnRight" type="button" value="右对齐" onclick="txtRight();" /></td>
</tr>
<tr>
<td colspan="7">
<iframe id="txtArea" name="txtArea" frameborder="0" style="height:337px;width:98%;border:1px solid #000033;" ></iframe></td>
</tr>
</table>
</div>
</div>
<input id="hiddenText" name="hiddenText" type="hidden" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" />
</form>
</body>
</html>
（2）simpleEditor.cs代码：
protected void Page_Load(object sender, EventArgs e)
{
//设置提交按钮的单击事件
btnSubmit.Attributes.Add("onclick", "saveTxt();");
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
//获取隐藏域中的文本
string s = hiddenText.Value;
//将文本保存到session中
Session["txt"] = s;
//跳转到showTxt页面显示文本
Response.Redirect("showTxt.aspx");
}
（3）showTxt.cs代码：
Response.Write(Session["txt"]);//获取并输出编辑区的文本内容
注意：在asp.net中，页面提交会把文本编辑器中的HTML内容当成攻击的内容，因此需要在aspx页面的Page标签中设置ValidateRequest=”false”来禁用攻击检测。
