基于HTML的在线文档编辑器的实现方法
作者：***
来源：《数字技术与应用》2012年第10期
        摘要：基于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处于可编辑状态：
        tEditable=true
        在主界面中加入一个名为HiddenContent隐藏表单元素，通过下面代码获取文档编辑区域中的内容便于传递给服务器进行存储：
        HiddenContent.value=EditField.document.body.innerHTML；
        2.2 编辑器中文本的格式化及插入HTML元素
        下面通过设置选定文本为红为例进行说明，其基本步骤如下。
        （1）选定欲要格式化的文本：
        var range=EditField.ateRange（）；
        （2）判断选定区域的元素类型：
        var rangeType=range.Type；
        （3）如果rangeType是Text（文本），则格式化：
        Command（"forecolor"，false，"Red"）；
        由上可知，格式化文本主要的方法是execCommand，下面对其基本语法进行简单介绍：
        Command（sCmd[，bUserInf][，vValue]）
        sCmd：为字符串值，表示执行的格式化指令。
        bUserInf：为可选的boolen类型值，表示是否显示用户界面。
        vValue：表示响应格式化命令所需要的参数。
        execCommand方法支持的常用指令如下表所示。
        execCommand方法通过指定sCmd为HTML元素（例如CreateLink）也可以向文档中插入各种HTML元素，但是如果元素属性过于复杂，可以使用下面介绍的插入多媒体对象的paste HTML方法来实现。
        2.3 插入多媒体对象
        在新闻信息中，除了文字外，通常还包括图片、音频、FLASH、视频等多媒体信息。
        （1）在HTML文本编辑器中插入多媒体信息的主要步骤。
        ①选定文本或指定插入点：
        var range=EditField.document.selection. createRange（）；
        ②利用对话窗体获取插入对象的相关参数，并将其构造成字符串形式返回编辑器主界面：
        var strObj=showModalDialog（“指定文档”）；
        ③将获取的对象字符串插入到指定位置：
        range.pasteHTML（strObj）；
        pasteHTML方法能够将指定的字符串（通常是HTML格式化后的字符串）插入或替换到指定的文档位置，从而实现插入相应的HTML元素或对象。
        （2）不同对象的strObj字符串简化形式如下。
        ①插入图片。
        ②插入声音或歌曲。
       
        type="application/x-mplayer2">
        ③插入FLASH或FLV视频。
       
        上述每个多媒体对象都可以利用标记给出其对应的控制参数，从而定义其外观和播放形式，实现个性化的界面设计。
        2.4 HTML文档编辑器中内容的存储
        当在编辑器中完成了整个文档的编辑后，通常需要将该文档内容存储在应用系统的数据
库中。通过下面代码获取在编辑器中文档的HTML代码：
        EditField.document.body.innerHTML；
        最终完成整个在线文档编辑发布系统的实现。
        3、结语
        基于HTML的在线文档编辑器能够满足各种WEB系统信息发布的需求。本文介绍了在线编辑器实现所需的关键技术，重点涉及到execCommand方法、pasteHTML方法的相关要点。在此基础上，不必再依赖于第三方HTML文档编辑组件，而设计和开发出针对于具体WEB应用系统的个性化信息发布模块。
        参考文献
        [1]David Flanagan著，张铭泽，译.JavaScript权威指南[M].机械工业出版社，2006年6月.
        [2]Simon Collison著.CSS基础教程[M].人民邮电出版社，2007年9月.
        [3]ckeditor [CP/OL].http：//ckeditor/
        [4]Microsoft Corporation.MSDN Library for Visual Studio2008[CP/DK].Microsoft Corporation，2007.
        [5]吴逸贤，吴目诚.精彩JavaScript程序设计[M].科学出版社，2002年6月.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。