| 来源:网络 加入时间:2008-8-10 浏览量:324 |
现在来给它增加一些特性，扩展它的功能，使它更实用。本文我们将了解这些新的特性是如何实现的，所有的新增功能都是用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
用户已经可以浏览他/她的电脑选择一个图片并上传到服务器了，我们是在后置代码中处理文件上传的。我提供了一个选项 | |