[原文源码下载]
开发一个自己的HTML在线编辑器（一）
摘要
在本文中，Haissam Abdul Malak将给大家详细介绍如何使用javascript开发一个HTML在线编辑器，它可以应用于web应用程序中，特别是论坛，社区和博客。这个编辑器支持基于XHTML创建文本的功能。
原文发布日期：2007.01.04
作者：Haissam Abdul Malak
翻译：webabcd
文章内容
介绍
在用户控件中添加HTML代码
javascript文件
编辑器属性
添加一个样式表
结论
介绍
我的一个朋友在一个正在开发的项目（一个博客网站）中遇到了一些问题，是关于文本编辑器的。在研究了所有免费的编辑器之后，他发现没有一个是他所需要的，所以我接下了这个任务，帮他开发一个HTML在线编辑器的用户控件，我认为和大家分享这个控件是个好主意，达到了知识共享的目的。
这个编辑器包括如下一些特性
1、工具栏包括了全部的功能（下面已列出）
·排列（居左，居中，居右）
·字体格式（加粗，下划线，斜体，字号，字体，文字颜色）
·计算单词数，删除格式，插入水平线，撤销，重复，插入字符
2、HTML模式结合到了一个框架中，文本模式结合到了另一个框架中。注意这两个框架只能有一个被显示。
3、有两个图标，分别是“HTML视图”和“设计模式”，一个文本框用来显示单词数，最后有两个隐藏文本框用来存储用户输入的数据。
要看懂这个实例，你需要有javascript和HTML的相关知识。
在用户控件中添加HTML代码
这部分我们将创建一个用户控件（hamHtmlEditor.ascx），并且在其中写一些必需的HTML代码。注意该用户控件不包含<head>, <body> 或 <form> 标记。
我们将创建3个表格来显示所有的图标，另外还要有3个下拉列表框。其中2个表格放在控件的顶端，1个表格放在控件的底部。每个图标都有3个事件，分别是onmouseover，onmouseup，onclick，处理这些事件的是javascript文件中的javascript代码。把javascript代码和HTML代码分开，可以让你更容易理解和调试。然后我们将创建3个层，第一个层包含一个已经有的HTML页（TextArea.htm）。我使用一个HTML页是因为如果用户输入了一个rul，它可以自动的把它转换为HTML代码并呈现在你的文本中。第二个层包括了1个textarea，在用户使用期间，它用来显示HTML代码（默认隐藏）。第3个层包含了一些符号，当用户点击“插入符号”后，这个层将被现实（默认隐藏）。
为了使用户能够输入文字，你必须在控件被使用的时候，将其设置为“设计模式”
列表1
οnlοad="document.frames['HamHtmlEditor1_content'].document.designMode='on'"请下载这个项目以知道如何正确的创建所有的HTML标记
图1
javascript文件
这部分我们将写一些处理用户事件的函数。首先，我们将定义一些全局变量，其中每一个变量都有自己的功能，但最多的是用来存储图标在被单击之前或者默认的值—“No”。只有一个变量有另一个功能，这个变量是sourceText，它用来存储用户输入的文本。
列表2
var sourceText= '';var imgStatusBold = 'No';var imgStatusItalic = 'No';var imgStatusUnderLine = 'No';var imgStatusLeft = 'No';var imgStatusCenter = 'No';var imgStatusRight = 'No';var imgStatusRemoveF= 'No';var imgStatusWCount = 'No';var imgStatusInsertL = 'No';基于上面这些变量的值，当用户点击了1个图标，将检查相关的变量是否是“Yes”，它用来指明相关的图标并不是第一次加载时的图标。当用户控件全部加载完毕，我们将立即设置这些图标为他们的初始状态，当我们需要改变图标状态的时候，如果原来的值为“No”，就把它变为“Yes”。
有三个功能分别被称作onmouseover，onmouseup，和onclick。Onmouseover触发函数ChangeImg()，作用是当用户把鼠标放到图标上则改变所显示的图标的状态，这个函数需要两个参数（容器ID和新图标路径）。注意工具栏上的图标在web应用程序中被放置到“Images”文件夹下。
列表3
function ChangeImg(id, imgsrc)
{
var imgSrc = "Images/" + imgsrc; document.getElementById(id).src = imgSrc;
}Onmouseup函数的功能是用户的鼠标离开一个图标时，把这个图标该回其初始的状态，它需要3个参数（容器ID，新图标路径和1个变量）
列表4
function ReturnImg(id, imgsrc, ownVar){ if(ownVar == 'No')
{
var imgSrc = "Images/" + imgsrc; document.getElementById(id).src = imgSrc;
}}第3个参数用来说明这个图标是否是被选中的状态，默认值是“No”。
单击图标后执行一个指定的动作，一个单独的javascript方法被调用，每一个动作都有标准的写法。
列表5
document.frames['HamHtmlEditor1_content'].document.execCommand('JustifyLeft',false,null);使用上面这个方法可以使用户输入的文字居左。ExecCommand将在文档中执行一个命令。它使用一个预先组合到一起的功能来直接在浏览器中操作页面的布局。注意，只有在页面完全加载完毕后才能使用它。
列表6
function MakeBold(boldover, bold){ var img = document.getElementById('Bold') var imgBold = "Images/" + boldover var imgNotBold = "Images/" + bold img.src = imgBold; if(imgStatusBold == 'Yes') { imgStatusBold='No'; img.src = "Images/" + bold; } else { imgStatusBold= 'Yes' } document.frames['HamHtmlEditor1_content'].document.execCommand('bold',false,null); document.frames['HamHtmlEditor1_content'].focus(); }上面这段代码的功能是使用户输入的文字加粗的。当用户点击了加粗按钮，我们要改变这个按钮的状态。设置相关的全局变量为“Yes”，意思是该按钮已被选中。每次用户单击按钮，我们都要检查相关的变量，来确定之前按钮是否是被选中的状态，然后我们给选中的文字加粗。它需要两个参数，第一个用来存储鼠标经过时加粗按钮的图标路径，第二个用来存储正常加粗按钮的路径。相同的语法也在，斜体和下划线中适用。
对文字进行排列，我们使用与MakeBold()相似的函数，但是，3个排列功能的按钮只能有一个是被选中状态，其它两个要变为初始的未被选中的状态。
为了完成上面指出的那个execCommand命令，请参考
http://www.course.com/downloads/newperspectives/crweb3/documents/dhtml_t02.html
现在我们创建一个计算用户输入的单词数的函数。定义一个变量，默认值为0。在定义另一个变量用来存储用户输入的文本，我们将拆开这个变量，并且将拆开的结果保存到一个数组中，然后检查数组内每个元素的长度，如果是零则不计数，如果不是零则计数变量加1。计数完后，我们把该值赋给用于显示计数的文本框。
列表7
var wordCount = document.frames['HamHtmlEditor1_content'].document.body.innerText;var count = 0;countWithSpace = wordCount.replace('/n', '');countWithoutSpaces = countWithSpace.split(' ');for(i=0;i<countWithoutSpaces.length;i++){ if(countWithoutSpaces[i].length>0) { count +=1; } window.parent.document.getElementById('HamHtmlEditor1_TxtCount').value = count;}当单击“删除格式”按钮后，我们调用一个javascript函数，发送命令“RemoveFormat”给execCommand用来删除选中文本的格式。
如果想删除某些已经有格式的文本的格式，这个功能将是非常有用的。
列表8
function RemoveFormating(){ document.frames['HamHtmlEditor1_content'].document.execCommand('RemoveFormat'); document.frames['HamHtmlEditor1_content'].focus();}“撤销”和“重做”功能与上面这段javascript类似。给execCommand发送“undo”或“redo”将执行撤销和重做功能。需要一个参数来指明命令的名字。
列表9
function Formats (style){ document.frames['HamHtmlEditor1_content'].document.execCommand(style); document.frames['HamHtmlEditor1_content'].focus();}当用户单击“插入符号”按钮，我们将在该按钮之后显示第3个层来出示所有符号图片。我们使用javascript来做这件事。
列表10
function ShowDiv(images){ var div = document.getElementById(images); if(div.style.display == 'block') div.style.display = 'none'; else div.style.display = 'block';}图2：用户单击“插入符号”后，编辑器的外观
当用户点击第3个层的任意一个符号时，另一个javascript函数被调用，它用来在编辑器中指针的位置处插入符号。这个函数需要3个参数。第一个参数用来指定execCommand的命令来在文档中插入一个图片（InsertImage），第二个参数是图片的路径，第三个参数是该图片所在的层的id。注意所有的符号在web应用程序中被放置在一个“Emoticons”文件夹下。
列表11
function insertImages(style,url,images){ document.getElementById(images).style.display = 'none' document.frames['HamHtmlEditor1_content'].focus(); HamHtmlEditor1_content.document.execCommand(style,'',url) document.frames['HamHtmlEditor1_content'].focus();}当单击“HTML视图”按钮后，第二个层被显示，而第一个层则被隐藏。这个层的“readonly”属性被设置成了“true”，意思是用户在此状态下不能对其编辑，我们只能在这个层里看到HTML代码。
列表12
function TransformtoHtml(){ document.getElementById('HamHtmlEditor1_Div2').style.display = 'block'; document.getElementById('HamHtmlEditor1_Div2').innerText = document.frames['HamHtmlEditor1_content'].document.body.innerHTML;}当单击“设计模式”按钮后，第二个层则被隐藏
列表13
function TransformToText(){ document.getElementById('HamHtmlEditor1_Div2').style.display = 'none';}下拉列表用来让用户选择预先设定好的数据。
第一个是字号，尺寸在1（10pt）到7（22pt）之间。这个按钮被单击后，要调用一段javascript函数。这个函数获得用户在下拉列表里选择的值，然后作为第三个参数发送给execCommand。第一个参数是“FontSize”，用来执行设置文字大小的命令。注意，下拉列表中的字号大小是预先在用户控件中的HTML代码里定义好的。
列表14
function ChangeFont(){ var fontSize = document.getElementById('FontDropDownonchange'); document.frames['HamHtmlEditor1_content'].document.execCommand('FontSize',0,fontSize.options[fontSize.selectedIndex].text); document.frames['HamHtmlEditor1_content'].focus();}接下来这段代码用来改变字体。第一个参数是“FontName”，用来执行设置文字字体的命令，第二个参数是false或者0，第三个参数是用户所选择的文字。
列表15
function ChangeFontName(){ var fontName = document.getElementById("FontFamilyName"); document.frames['HamHtmlEditor1_content'].document.execCommand('FontName',false,fontName.options[fontName.selectedIndex].text); document.frames['HamHtmlEditor1_content'].focus();}第三个下来列表用来选择所选文字的颜色。这些颜色是预先定义好的，如果你想可以设置更多的颜色，请修改相关的HTML代码。
列表16
function ChangeFontColor(){ var fontColor = document.getElementById("Color"); document.frames['HamHtmlEditor1_content'].document.execCommand('ForeColor',false,fontColor.options[fontColor.selectedIndex].text); document.frames['HamHtmlEditor1_content'].focus();}最后的功能用来把用户输入的文本值存储到一个隐藏字段中，其详细的HTML值存储到另一个隐藏字段中。这样即使编辑器失去焦点，也可以获取到值，下一部份你可以看到在编码的过程中通过使用两个属性来取得隐藏字段的值。
列表17
function CloneText(){ document.getElementById('HamHtmlEditor1_ContentTxt').innerText = document.frames['HamHtmlEditor1_content'].document.body.innerText; document.getElementById('HamHtmlEditor1_ContentHtml').value = document.frames['HamHtmlEditor1_content'].document.body.outerHTML;}这部分完成后，你的javascript文件就准备完了。你如果想在你的用户控件中使用这个文件，就需要在代码中加入<head>标签。如下
<script src="HTMLEditor.js" language="javascript" type="text/javascript></script>如果你想调试javascript，需要加一个词“debugger”。这样编译时将开始调试模式。或者你也可以设置你的IE浏览器，把“禁用脚本调试（Internet Explorer）”和“禁用脚本调试（其他）”两个复选框的选中状态取消，然后添加你的端点。（译者注：调试js可以参考这篇文章：在Visual Studio中调试JavaScript）
编辑器属性
如果想将用户输入的文本保存为.txt文件或者把HTML代码保存到另一个.txt文件，你可以在这个控件中添加以下两种属性：
首先在你的ascx.cs页面创建两个字段。
列表18
protected System.Web.UI.HtmlControls.HtmlInputText ContentTxt;protected System.Web.UI.HtmlControls.HtmlInputText ContentHtml;创建两个被保护的变量，保存以上创建的字段的值。
列表19
protected string _text;protected string _html;第一个属性被称为“ContentText”，它可以获取文本并在你的后置代码中赋值给一个变量。
ContentTxt被声明成一个HtmlInputText控件，它的Value属性被存储到_text字符串变量中。
列表20
public string ContentText{ get { return _text = ContentTxt.Value; } set { _text = value; }}第二个属性被称为“ContentInnerHtml”，它可以获得详细的HTML代码。
ContentHtml被声明成一个HtmlInputText控件，它的Value属性被存储到_html字符串变量中。
列表21
public string ContentInnerHtml{ get { return _html = ContentHtml.Value; } set { _html = value; }}添加一个样式表
在这部分我们将创建一个样式表（Styles.css），用来修改工具栏和框架的UI。我们将设置工具栏的背景颜色为蓝色。框架右侧和底部的也设置成相同的颜色。通过修改下面的代码，你可以随便设置控件的界面（UI）。
列表22
.HtmlView{ background-color:white; border-bottom-width:medium; border-bottom-style:solid; border-bottom-color:cornflowerblue; border-right-width:medium; border-right-color:cornflowerblue; border-right-style:solid;}.FirstDiv{ background-color:white; border-bottom-width:medium; border-bottom-style:solid; border-bottom-color:cornflowerblue; border-right-width:medium; border-right-color:cornflowerblue; border-right-style:solid;}.toolbar{ background-color:cornflowerblue; background-repeat:repeat;}现在在你用户控件的<head>标签内链接上这个样式表，代码如下：
<LINK href="Styles.css" type="text/css" rel="stylesheet">
图3
注意如果你要在用户控件中包含多个实体，你必须为这些div层创建动态的标识。请注意，div层的ID被设置成了“userControlID_divlayer”。
结论
我们可以看到，开发你自己的HTML在线编辑器并不是很困难。在这篇文章里我详细的解释了javascript语言和XHTML。这是HTML在线编辑器的第一个版本，我们非常感谢你使用它并且提供给我们你的意见。它的第二个版本，将会有更多的特性，如果你有什么好的注意，欢迎告诉我们。我们目前正在开发第二个版本，它也将通过这个网站发布出来，其会增加复制，粘贴，剪切，项目符号，项目编号，打印等功能以及一个可自定义的工具栏。
希望这篇文章有阅读的价值。
[原文源码下载]
祝编程愉快！
原文地址：http://aspalliance.com/1156_Rich_Text_Editor__Part_II
[原文源码下载]
[翻译]开发一个自己的HTML在线编辑器（二）
原文发布日期：2007.02.27
作者：Haissam Abdul Malak
翻译：webabcd
文章内容
介绍
javascrit文件
后置代码
结论
介绍
在我们一起研究了如何开发一个HTML在线编辑器后（第一部分在这里 http://aspalliance.com/1092_Rich_Text_Editor_Part_I ）（译者注：中文在这里），现在来给它增加一些特性，扩展它的功能，使它更实用。本文我们将了解这些新的特性是如何实现的，所有的新增功能都是用javascript来写的。
从之前的文章你看到了开发一个你自己的HTML在线编辑器是多么简单。当然，我们的第一个版本只包括一些标准功能，现在，我们要给它增加一些新的功能，我敢说，它将包括更多的特性并且更加实用。
下面列出这些新增的特性
1、删除线：可以给用户输入的文本增加删除线
2、减少/增加缩进：可以减少或增加文本的缩紧
3、插入图片：可以新开一个窗口让用户选择需要上传的图片，然后直接插入到编辑器里
4、复制，剪切和粘贴：通过剪切板实现复制，剪切和粘贴的功能
5、打印：在文本模式的时候可以调出打印对话框进行打印
6、项目符号和编号：可以在文本的开头增加项目符号和编号
7、插入线：可以在文本中插入一条线
在我们的用户控件里增加一些HTML代码
这部分我们将在工具栏处增加一些新的HTML元素。我们主要是放置了一些图片，为了实现上面提及过的行为并且处理这些事件以实现它们的功能。
列表1
<IMG class=StrikeOut id=Strikethrough onmouseover="ChangeImg('Strikethrough','strikethrough.over.gif')" title="Strike Through" onclick="Formats('StrikeThrough','<%= this.HamEditorChildID %>' )" onmouseout="ReturnImg('Strikethrough','strikethrough.gif',imgStatusUnderLine)" src="Images/strikethrough.gif" />
上面的列表增加了一个img的HTML控件，它的onmouseover事件将调用一段javascript函数（我之前的文章已经对此解释过了），以改变图片的选中状态，onclick事件将调用另一段javascript函数以得到选中的文本，onmouseover将返回图片最初的状态。本次新增的功能除了插入图片外都将使用于此相同的概念。
请下载源码以查看所有的HTML标签是如何创建的
图1
javascript文件
这一部分我们将在已经创建好的javascript文件内增加一些新的功能，从而去处理这些新特性的事件。所有的这些功能都被定义到了这个javascript文件内，然后被编辑器引用
列表2
function Formats(style,editorId)
{
// 存储Iframe的id var finalDivId = editorId + '_content'; // 设置焦点 document.frames[finalDivId].focus(); // 应用新的命令 document.frames[finalDivId].document.execCommand(style); // 设置焦点 document.frames[finalDivId].focus();
}
本文所列的几乎所有的新增的事件处理都会使用上面的功能。它有两个参数：第一个参数是需要应用的命令，例如复制、粘贴之类的没；第二个参数是编辑器的id。我们使用一个相同的功能（execCommand）来应用这些变化。
列表3
function SetBorders(id){ // 设置onmouseover事件时表情图片的边框样式 var imgBorder = document.getElementById(id); imgBorder.style.borderStyle = "solid"; imgBorder.style.borderWidth = "thin"; imgBorder.style.borderColor = "#688B9A";}
在插入表情的时候将会调用上面的函数。当鼠标经过了一个表情文件，我们将会调用这个函数设置表情图片的边框。用这种方法，可以方便用户观察到鼠标是经过了哪一个表情图片。注意我们增加了一个“x”图片，用于当用户不需要选择任何表情图片的时候关闭div层。
图2
列表4
function ClearBorders(id){ // 清除onmouseover事件时表情图片的边框样式 var imgBorder = document.getElementById(id); imgBorder.style.borderStyle = "solid"; imgBorder.style.borderWidth = "thin"; imgBorder.style.borderColor = "white";}
当鼠标离开一个表情图片的时候清除它的边框样式则调用这个函数
列表5
function SetImage(editorId,path,e){ // 获得单击位置 var height = e.clientY + parseInt('5'); // 获得被单击图片的高度 var offsetHeight = parseInt(e.offsetY); height = height - offsetHeight; // 获得单击位置（宽） var width = e.clientX // 获得被单击图片的宽度 var offsetWidth = parseInt(e.offsetX); width = width - offsetWidth; // 存储iframe的id var finalDivId = editorId + '_content'; path = unescape(path); // 从用户的电脑里插入一个图片 window.open('UploadImages.aspx?path=' + path + '&f=' + finalDivId,null,'width=500px,height=50px,titlebar=no,menubar=no,statusbar=no,toolbar=no,top=' + height + 'left=' + width ); }
我们创建了一个新的被称作UploadImages.aspx的webform，它来实现插入图片的特性。当用户单击了插入图片的图标后，这个form被打开，它允许用户从他/她的电脑内选择一个图片上传到服务器从而实现把图片插入到编辑器内的功能。这个webform还包括了两个文本框，用于让用户指定他/她上传图片后图片所显示的宽度和高度。当这个webform打开的时候显示如下
图3
用户已经可以浏览他/她的电脑选择一个图片并上传到服务器了，我们是在后置代码中处理文件上传的。我提供了一个选项，可以让管理员设置图片上传到服务器后所存放的目录。我将在后置代码的部分中详细解释这些。我们规定高度属性的最小值为100px，宽度属性的最小值为150px，并且这也是默认值
列表6
function insertsImage(imageurl,editorId,height,width){ opener.document.frames[editorId].focus(); if(imageurl != "" | editorId!= "")
{
imageurl = unescape(imageurl); var imageurl = imageurl + '"' + "width=" + width + "px" + " " + "height="+ height + "px"; opener.document.frames[editorId].document.execCommand('InsertImage',false,imageurl); } opener.document.frames[editorId].focus();}
当用户点击了插入图片后将调用这段函数。在这个单击事件中，我们上传了文件并且通过javascript把这个图片插入到编辑器中，显示的宽度和高度就是我们所指定的
图4
后置代码
这部分我们将了解如何在后置代码中实现上传图片的功能，并且将知道管理员如何设置图片上传的路径。
列表7
public string FilePath{ get { return _filePath;
} set { _filePath = Server.HtmlEncode(Request.ApplicationPath + value); }}
上面的这个string类型的属性用于让管理员设置图片上传的默认路径。接下来的列表将告诉你如何在你的webform中指定这个路径。
列表8
string imagePath = "/UserImages";((hamHtmlEditor)this.FindControl("HamHtmlEditor1")).FilePath = imagePath;
列表9
public string Location{ get { return _location; } set { _location = value; }}
为了使图片上传到web服务器后可以直接插入到编辑器里，我们需要使用上面这个属性，它用于获得编辑器的ID
列表10
if (heightValidator.IsValid && widthValidator.IsValid){ string elementToInsert = Request.QueryString["f"]; if(UploadImage.PostedFile != null && UploadImage.PostedFile.ContentLength > 0) { try { string fileName = System.IO.Path.GetFileName(UploadImage.PostedFile.FileName); string fileLocation = Request.QueryString["path"] + "/" + fileName; this.ImagePath = Server.HtmlEncode(fileLocation); this.Location = elementToInsert; Button1.Enabled = false; UploadImage.PostedFile.SaveAs(Server.MapPath(fileLocation)); } catch(Exception ex) { Response.Write("<script language=javascript>alert('"+ex.Message.ToString().Replace(@"/",@"//")+"');</script>"); } finally { Button1.Enabled = true; } }}
上面这段代码是写在插入图片按钮的点击事件里的。它的作用是上传图片到指定的路径，try catch块用于处理异常事件。
注意：有一个要非常注意的地方就是ASPNET（注：windows 2003 下是NETWORK SERVICE）用户是否有你的上传目录的写入权限。
列表11
public bool ShowHeader{ get { return _Header; } set { _Header = value; }}
这是一个Boolean类型的属性。如果设置它为false则工具栏不会显示。
图5
当你把ShowHeader属性设置为false的时候编辑器显示如上。工具栏和其他的图标都将被隐藏。
图6
这就是增加了一个新的特性之后的编辑器的最终版本
结论
这个编辑器的版本只在IE中进行了测试。下一个版本中我将让它在更多的浏览器中工作。如果你有增强这个编辑器功能的建议或者提出其中的bug，我将非常欢迎。我也会把它封装成一个自定义控件，使你能更简单的使用它。希望你能从本文中获得一些有用的信息。
[原文源码下载]