编辑器原理/文本框格式控制学习笔录_编辑框选定文本原理-优快云博客

本文链接：https://blog.youkuaiyun.com/junjun08/article/details/7217245

本文详细探讨了使用ASP实现文本编辑器的基本原理，包括如何设置编辑器的designMode属性以实现富文本编辑功能，以及如何处理文本框中的回车、换行和空格的显示问题。通过创建简单的实例，展示了如何让用户在页面上输入文本，并使用按钮执行加粗、倾斜、添加下划线等文本格式化操作。此外，文章还介绍了如何将用户输入的数据保存到数据库中，并提供了一个处理函数用于显示数据库中的评论列表。通过多个测试案例，演示了如何正确处理文本框中的特殊字符，以及在数据库中存储和展示这些字符的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我写了三个asp页面来研究了一下编辑器的原理和文本框回车、换行、空格的显示问题：
comment.asp 研究编辑器最基本的原理；
comment_save.asp 数据库处理页面，把comment.asp页面提交上来的数据保存到数据库；
comment_show.asp 显示之前输入的数据，研究回车、换行、空格的显示问题。

当然别忘了建数据库，名为rte.mdb，表的名称为：cmt，三个字段（id,user,comment）。

此文是自己的学习心得，如果有哪位高手发现了其中的不足之处或错误，欢迎给我留言！

一、编辑器原理探索：

对于支持富文本编辑的浏览器来说，其实就是设置 document 的 designMode 属性为 on 后，再通过执行 document.execCommand('commandName'[, UIFlag[, value]])即可。

比方说，我们要加粗字体，执行 document.execCommand('bold', false) 即可。值得注意的是，通常是选中了文本后才执行命令，被选中的文本才被格式化。对于未选中的文本进行这个命令，各浏览器有不同的处理方式，比方 IE 可能是对位于光标中的标签内容进行格式化，而其它浏览器不做任何处理，这超出本文的内容，不细述。同时需要注意的是，UIFlag 这个参数设置为 true 表示 display any user interface triggered by the command (if any), 在我们今天的教程中都是 false, 而 value 也只在某些 commandName 中才有，具体参考以上刚给出的两个链接。

为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素，然后对这个 iframe 内的 document（通过 iframe.contentWindow.document 获得）进行操作。

下面我将通过一个简单的实例（允许用户输入文本及使选中文本产生加粗、倾斜、添加下划线等效果，并可以提交给数据库存储）来阐述HTML在线编辑器的原理：

1、创建一个编辑区域——新建一个<iframe>：

<iframe id="HtmlEdit" height="200px" width="500px" scrolling="no"></iframe>

2、调用javascipt开启<iframe>的编辑功能：

<script language="javascript">
//注：disignMode标识浮动框架是否允许输入。一定要放在IFRAME标签后面。
HtmlEdit.document.designMode="on";
</script>

3.加入一个处理函数Format，用于：

<script language="javascript">
//加入一个处理函数Format
function format(hc,pa)
{
	HtmlEdit.focus(); //浮动框架取得焦点
	HtmlEdit.document.selection.createRange(); //为当前选择的文本创建一个 TextRange 对象,即获取当前所选择的文本。
	HtmlEdit.document.execCommand(hc,false,pa); //为当前选择文本执行excecCommand方法,即为当前选择的文本执行一个命令,hc代表是什么命令，false不显示用户界面，为true时，如果命令支持时，将显示一个用户界面，pa表示命令的参数
}
</script>

4.创建一个表单，表单包括编辑按钮：加粗、倾斜、添加下划线等按钮，分别在Onclick事件发生时调用format函数。

<form action="comment_save.asp" id="form1" name="form1" method="post" style="text-align:center">
    <input type="button" name="bold" value="粗" onClick="format('bold','')" />
    <input type="button" name="italic" value="斜" onClick="format('italic','')" />
    <input type="button" name="underline" value="下划线" onClick="format('underline','')" />
    <input name="submit" id="submit" type="submit" value="发表评论" onClick="OnSubmit()" /> <!--提交-->
</form>

5.创建提交处理函数:OnSubmit(),用于当用户点击提交按钮时，获取文本的HTML源代码并赋值给隐藏域content后提交单到数据库处理页面。

<script language="javascript">
//创建提交处理函数:OnSubmit(),用于当用户点击提交按钮时，获取文本的HTML源代码并赋值给隐藏域content后提交单到数据库处理页面。
function OnSubmit()
{
	document.form1.content.value=HtmlEdit.document.body.innerHTML; //innerHTML属性表示设置或获取对象及其内容的 HTML 形式
}
</script>

就是这样，一个简单的HTML在线编辑就完成了，很简单。

comment.asp 完整代码如下（带有简单的CSS样式）：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>编辑器原理学习</title>
<style type="text/css">
<!--
div {padding:4px; font-size:12px;}
p { padding:0px; margin:0;}
-->
</style>
</head>
<script language="javascript">
//加入一个处理函数Format
function format(hc,pa)
{
	HtmlEdit.focus(); //浮动框架取得焦点
	HtmlEdit.document.selection.createRange(); //为当前选择的文本创建一个 TextRange 对象,即获取当前所选择的文本。
	HtmlEdit.document.execCommand(hc,false,pa); //为当前选择文本执行excecCommand方法,即为当前选择的文本执行一个命令,hc代表是什么命令，false不显示用户界面，为true时，如果命令支持时，将显示一个用户界面，pa表示命令的参数
}
//创建提交处理函数:OnSubmit(),用于当用户点击提交按钮时，获取文本的HTML源代码并赋值给隐藏域content后提交单到数据库处理页面。
function OnSubmit()
{
	document.form1.content.value=HtmlEdit.document.body.innerHTML; //innerHTML属性表示设置或获取对象及其内容的 HTML 形式
}
</script>
<body>
<form action="comment_save.asp" id="form1" name="form1" method="post" style="text-align:center">
  <div>
    <textarea type="text" name="username" rows="4" cols="30" style="overflow:auto"></textarea>
    <input type="button" name="bold" value="粗" onClick="format('bold','')" />
    <input type="button" name="italic" value="斜" onClick="format('italic','')" />
    <input type="button" name="underline" value="下划线" onClick="format('underline','')" />
  </div>
  <div>
    <iframe id="HtmlEdit" height="200px" width="500px" scrolling="no"></iframe>
  </div>
  <div>
    <input name="submit" id="submit" type="submit" value="发表评论" onClick="OnSubmit()" /> <!--提交-->
    <textarea style="display:none" name="content"></textarea>
  </div>
</form>
</body>
</html>
<script language="javascript">
//注：disignMode标识浮动框架是否允许输入。一定要放在IFRAME标签后面。
HtmlEdit.document.designMode="on";
</script>

二、文本框格式（回车、换行、空格）的显示：
comment_save.asp 代码如下：

<%@LANGUAGE="VBSCRIPT"%>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
p { padding:0px; margin:0;}
-->
</style>
<%
username=Request("username")
comment=Request("content")
'----------连接数据库---------
Set conn=Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("rte.mdb")
conn.Open connstr
'创建Recordset对象
set rs=server.createobject("adodb.recordset")
sql="select user,comment from cmt"   
rs.open sql,conn,1,3     '用刚才创建的名为rs的记录集打开数据库，设置属性为插入数据 （1,1为只读数据,1,3为插入数据，2,3是修改数据)
rs.addnew    '用记录集新添加一条数据
rs("user")=username
rs("comment")=comment
rs.update    '更新一下数据库中的数据。
%>
<div style="text-align:center; font-size:12px;">评论成功</div>
<div style="text-align:center; color:#F00; font-size:12px;"><a href="comment_show.asp">点击显示评论列表</a></div>
<%
'断开连接
rs.Close
Set rs=Nothing
conn.Close
Set conn=Nothing
%>

comment_show.asp代码如下：

<%@LANGUAGE="VBSCRIPT"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>编辑器原理学习</title>
<style type="text/css">
<!--
div {padding:2px;}
p { padding:0px; margin:0;}
-->
</style>
</head>
<% 
function HTMLEncode(fString)
if not isnull(fString) then
fString = Replace(fString, CHR(32), " ")'转换空格
fString = Replace(fString, CHR(10), "<BR>")'转换回车换行
HTMLEncode=fString
end if
end function
%>
<body>
<%
 '----------连接数据库---------
Set conn=Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("rte.mdb")
conn.Open connstr
'创建Recordset对象
Set rs_show=Server.CreateObject("ADODB.RecordSet")
sql="SELECT user,comment FROM cmt"
rs_show.Open sql,conn,1,1
%>
<div style="margin:0 auto; width:500px;">
<%
if rs_show.recordcount<1 Then
	response.Write("<div style='text-align:center;'>没有评论</div>")
else
DO WHILE NOT rs_show.EOF
  username=HTMLEncode(rs_show("user"))
  comment=rs_show("comment")
%>
    <div style="margin-bottom:10px;">
        <div style="float:left; width:220px; background-color:#999; font-size:12px;"><%=username%></div>
        <div style="float:left; background-color:#F90; font-size:12px;"><%=comment%></div>
        <div style="clear:both"></div>
    </div>
<%
rs_show.MoveNext
Loop
END if
%>
<div style="clear:both;"></div>
</div>
</body>
</html>
<%
'断开连接
rs_show.Close
Set rs_show=Nothing
conn.Close
Set conn=Nothing
%>

经过多组数据的测试：
1、在文本框中输入空格或回车等于是在标签里敲空格回车（如下，不一定是P标签），是显示不出来想要的格式，所以只能显示一个空格字符的距离；

<p>       空格    空格
   回车
</p>

2、由第一条，虽然显示不出来，但是在提交时这些格式是同时被保存进数据库中的，所以我们只需要从数据库中提取数据时做一下字符转换就能显示这些输入的空格和回车了（见 comment_show.asp 中 13~21行 + 39~40行）；
3、在此例中，在编辑框中敲enter键，自动增加<p></p>成为一个新的段落，敲shift+enter是<br>换行。

注意：
也许你会注意到为什么在字符转换时，comment没有转换呢？这是因为请注意在comment.asp页面的（23~25行）

document.form1.content.value=HtmlEdit.document.body.innerHTML;

语句，由于comment值是由该页面的 HtmlEdit.document.body.innerHTML 传过来的，而它从编辑框中获得的已经是HTML代码形式的了，因此它是连同HTML标签一起被保存进数据库中的，所以在comment_show.asp页面显示时不需要转换。

编辑器原理/文本框格式控制 学习笔录

编辑器原理/文本框格式控制学习笔录