开发一个自己的HTML在线编辑器(二)
2010-09-14 13:25:23 来源:WEB开发网本文示例源代码或素材下载
原文地址:http://aspalliance.com/1156_Rich_Text_Editor__Part_II
作者:Haissam Abdul Malak
介绍
在我们一起研究了如何开发一个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=http://tech.ddvip.com/2008-11/"Images/strikethrough.gif" />
更多精彩
赞助商链接