基于HTML的在线文档编辑器的实现方法

摘 要：基于HTML的在线文档编辑器是几乎所有在线应用系统中信息发布必不可少的功能模块.在线文档编辑器主要用于编辑文字并对其格式化、以及插入各种多媒体对象（图片、音乐、视频、FLASH动画）等等.当前很多在线应用系统的信息发布模块通常采用第三方组件,存在一定的局限与弊端.本文介绍了实现在线文档编辑器的基本方法和技术,从而能够设计与开发出满足性化需求的发布模块.

关 键 词：在线文档编辑器HTML信息发布WEB应用开发

中图分类号：TP311文献标识码：A文章编号：1007-9416（2012）10-0215-02

随着有线或无线互联网的不断发展,各种基于WEB的应用系统不断的改变着人们的工作、生活方式,互联网已经成为人们获取信息的主要方式,WEB应用系统中信息发布必不可少的功能模块是基于HTML的在线文档编辑器.当前绝大多数WEB应用使用的是第三方HTML文档编辑器组件（例如FCKeditor、FreeTextBox、eWebEditor等等）,这些组件虽然功能强大、稳定可靠,但由于是通用型组件,在满足个性化或特殊需求上仍然存在一定的局限与不足.本文介绍了实现在线文档编辑器的基本方法和技术,从而能够开发出满足系统个性化的信息发布模块.

1.在线HTML文本编辑器的基本功能

当前WEB应用系统中的在线文档编辑器主要完成如下功能：

（1）文本格式化与排版.包括文字的输入；选定内容的复制、剪切、粘贴、查找、删除、清除格式、取消、重做；文本格式化如字体、字号、文字颜色、背景颜色、加粗、倾斜、下划线、删除线、上标、下标、项目符号等；文档排版如各种对齐方式、段落的缩进控制等.

（2）多媒体对象的插入,如插入图片、音乐、视频、FLASH影片、表情等.

（3）HTML元素对象的插入,如插入超级链接、水平线、表格、文本框、下拉菜单、特殊字符、等等.

同时配合一些文档编辑辅助功能,如预览、查看源代码、保存、打印等,从而使得在线文本编辑能够完成几乎所有互联网信息的编辑与发布功能.

下文将针对文本基本格式化与多媒体对象的插入功能实现方法进行介绍,以抛砖引玉.

2.基本实现方法和技术

2.1在线HTML文本编辑器的基本构成

编辑器界面由编辑功能菜单与文档编辑区两部分构成.

（1）编辑功能菜单包含各种编辑功能按钮,可在主文档中（如果主文档为HTMLEDIT.HTML）利用表格或DIV层来控制其放置的位置.

（2）文档编辑区利用内联框架IFrame构成（这里检测设IFrame名称为EditField）,在内联框架中加载一空白编辑HTML文档（这里检测设该文档为Edit.）.

同时在主文档加载时,用下面JS代码使得EditField处于可编辑状态：

EditField.document.contentEditable等于true

在主界面中加入一个名为HiddenContent隐藏表单元素,通过下面代码获取文档编辑区域中的内容便于传递给怎么写作器进行存储：

HiddenContent.value等于EditField.document.body.innerHTML；

2.2编辑器中文本的格式化及插入HTML元素

下面通过设置选定文本为红色为例进行说明,其基本步骤如下.

（1）选定欲要格式化的文本：

varrange等于EditField.document.selection.createRange（）；

（2）判断选定区域的元素类型：

varrangeType等于range.Type；

（3）如果rangeType是Text（文本）,则格式化：

EditField.document.execCommand（"forecolor",false,"Red"）；

由上可知,格式化文本主要的方法是execCommand,下面对其基本语法进行简单介绍：

obj.execCommand（sCmd[,bUserInf][,vValue]）

sCmd：为字符串值,表示执行的格式化指令.

bUserInf：为可选的boolen类型值,表示是否显示用户界面.

vValue：表示响应格式化命令所需要的参数.

execCommand方法支持的常用指令如下表所示.

execCommand方法通过指定sCmd为HTML元素（例如CreateLink）也可以向文档中插入各种HTML元素,但是如果元素属性过于复杂,可以使用下面介绍的插入多媒体对象的pasteHTML方法来实现.

2.3插入多媒体对象

在新闻信息中,除了文字外,通常还包括图片、音频、FLASH、视频等多媒体信息.

（1）在HTML文本编辑器中插入多媒体信息的主要步骤.

①选定文本或指定插入点：

varrange等于EditField.document.selection.createRange（）；

②利用对话窗体获取插入对象的相关参数,并将其构造成字符串形式返回编辑器主界面：

varstrObj等于showModalDialog（“指定文档”）；

③将获取的对象字符串插入到指定位置：

range.pasteHTML（strObj）；

pasteHTML方法能够将指定的字符串（通常是HTML格式化后的字符串）插入或替换到指定的文档位置,从而实现插入相应的HTML元素或对象.

（2）不同对象的strObj字符串简化形式如下.

①插入图片.

②插入声音或歌曲.

③插入FLASH或FLV视频.

上述每个多媒体对象都可以利用标记给出其对应的控制参数,从而定义其外观和播放形式,实现个性化的界面设计.

2.4HTML文档编辑器中内容的存储

当在编辑器中完成了整个文档的编辑后,通常需要将该文档内容存储在应用系统的数据库中.通过下面代码获取在编辑器中文档的HTML代码：

EditField.document.body.innerHTML；

最终完成整个在线文档编辑发布系统的实现.

3.结语

基于HTML的在线文档编辑器能够满足各种WEB系统信息发布的需求.本文介绍了在线编辑器实现所需的关键技术,重点涉及到execCommand方法、pasteHTML方法的相关要点.在此基础上,不必再依赖于第三方HTML文档编辑组件,而设计和开发出针对于具体WEB应用系统的个性化信息发布模块.