原文地址：http://aspalliance.com/1092_Rich_Text_Editor_Part_I
[原文源码下载]
开发一个自己的HTML在线编辑器（一）
摘要
在本文中，Haissam Abdul Malak将给大家详细介绍如何使用javascript开发一个HTML在线编辑器，它可以应用于web应用程序中，特别是论坛，社区和博客。这个编辑器支持基于XHTML创建文本的功能。
原文发布日期：2007.01.04
作者：Haissam Abdul Malak
翻译：webabcd
文章内容
介绍
在用户控件中添加HTML代码
javascript文件
编辑器属性
添加一个样式表
结论
介绍
我的一个朋友在一个正在开发的项目（一个博客网站）中遇到了一些问题，是关于文本编辑器的。在研究了所有免费的编辑器之后，他发现没有一个是他所需要的，所以我接下了这个任务，帮他开发一个HTML在线编辑器的用户控件，我认为和大家分享这个控件是个好主意，达到了知识共享的目的。
这个编辑器包括如下一些特性
1、工具栏包括了全部的功能（下面已列出）
    ·排列（居左，居中，居右）
    ·字体格式（加粗，下划线，斜体，字号，字体，文字颜色）
    ·计算单词数，删除格式，插入水平线，撤销， ......

HTML特殊转义字符列表
2009-11-10 15:45
如何显示空格？
通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 表示空格。
HTML特殊转义字符列表
最常用的字符实体
Character Entities
显示说明实体名称实体编号
 
半方大的空白
 
 
 
全方大的空白
 
 
 
不断行的空白格
 
 
<
小于
&lt;
&#60;
>
大于
&gt;
&#62;
&
&符号
&amp;
&#38;
"
双引号
&quot;
&#34;
©
版权
&copy;
&#169;
®
已注册商标
&reg;
&#174;
™
商标（美国）
™
&#8482;
×
乘号
&times;
&#215;
÷
除号
&divide;
&#247;
ISO 8859-1 (Latin-1)字符集
HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符集。
备注：为了方便起见，以下表格中，“实体名称”简称为“名称”，“实体编号”简 ......

    for 
(tmp 
= 
m_commentHead
; 
tmp
; 
tmp 
= 
tmp->next)
    {
        nCommentNum ++
;
        
memset(wBuffer,
0
,COMMENT_LEN)
;
        
MultiByteToWideChar(CP_UTF8,
0
,tmp->comment,-
1
,wBuffer,COMMENT_LEN)
;
        if 
(wcslen(wBuffer) 
== 
0 
)
        {
            
continue;
        
}
        
switch 
(nCommentNum)
        {
        
case 
1
:
           ......

有时，在数据取出一大段文字要输出到页面上，如果有回车符号，在页面会显示不出来。要显示要用到escape参数
escape="false".
<s:property value="aaa<br>aaa" escape="false"/>
这样就能分行显示了。
......

<style type="text/css">
/*
根据input的type来控制css样式
*/
/*
1.用css的expression判断表达式
优点：简单，轻量级
缺点：expression判断表达式FireFox是不支持的。致命的是只能区分出一个（例如例子中就只能区分出text文本框），不要试图设置多个，下面的会将上面的覆盖掉
 
input
{
background-color:expression(this.type=="text"?'#FFC':'#eee');
}
*/
/*
2.用css中的type选择器
优点：简单，明了，可以分区出各个input控件形态。
缺点：type选择器，IE6之前的对web标准支持的不太好的浏览器不能支持
input[type="text"]
{
background-color:aquamarine;
}
input[type="password"]
{
background-color:bisque;
}
input[type="submit"]
{
background-color:blueviolet;
}
input[type="reset"]
{
background-color:chocolate;
}
input[type="radio"]
{
background-color:darkcyan;
}
input[type="checkbox"]
{
background-color:dodgerblue;
}
input[type="button"]
{
background-color:purple;
}
*/
</style>
<script type="text/javascript">
/*
  3.用javascript脚本实现
 
......

我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边（参见第9课关于盒状模型的描述）。下图阐明了其原理：
举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示：
如何实现这个效果？
上例的HTML代码如下所示：
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
要实现图片向左浮动、而且被文字环绕的效果，你只需先设定图片所在盒子的宽度，然后再把CSS属性float设为left即可：
#picture {
float:left;
width: 100px;
}
显示示例
另一个例子：列
浮动也可以用于实现在文档中分列。要创建多个列，你需要在HTML代码里用div来结构化想要的各个列：
<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
......