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

基于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.html）。 同时在主文档加载时，用下面JS代码使得EditField处于可编辑状态： EditField.document.contentEditable=true 在主界面中加入一个名为HiddenContent隐藏表单元素，通过下面代码获取文档编辑区域中的内容便于传递给服务器进行存储： HiddenContent.value=EditField.document.body.innerHTML； 2.2 编辑器中文本的格式化及插入HTML元素 下面通过设置选定文本为红色为例进行说明，其基本步骤如下。 （1）选定欲要格式化的文本： var range=EditField.document.selection.createRange（）； （2）判断选定区域的元素类型： var rangeType=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元素，但是如果元素属性过于复杂，可以使用下面介绍的插入多媒体对象的paste HTML方法来实现。 2.3 插入多媒体对象 在新闻信息中，除了文字外，通常还包括图片、音频、FLASH、视频等多媒体信息。 （1）在HTML文本编辑器