大多数的在线文本编辑器都是使用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”来禁用攻击检测。