跨平台HTML在线编辑.ppt

在线页面编辑系统 2010年浙江理工大学毕业论文答辩 2002级软件工程 指导老师：吴小竹、丁善镜 福州大学 计算机科学与技术系 2006年6月11日 课题背景 随着互联网技术的迅速发展，各种WEB应用程序层出不穷，其中以处理文本信息的系统居多，如电子邮件系统，CMS(内容管理系统) 内容管理系统等，还有博客，论坛这几年的兴起.也使得在线编辑器已经在网络中随处可见。 一个好的编辑器也将为网络用户提供方便的操作。而现有许多系统的实现往往是平台相关的，如ASP，JSP版本的实现。该课题主要研究的就是跨平台的html在线编辑器的实现。 在线编辑器概述 在编辑器的嵌入在WEB中而且操作界面与WORD类似。结合html强大的表现力，能够轻松自如的作出生动、美观、形式多样的文件。使用在线网页编辑器,可以通过浏览器,直接编辑网页的内容.以所见即所得的方式,实现网页图文混排.在网站管理系统中,大部分的网页内容都可以使用网页编辑器进行图文混排编辑.甚至可以将现成的网页内容或WORD文档的内容拖放到编辑器中,直接生成网页. 要求熟悉HTML，JAVASCRIPT，CSS等WEB编程技术。 HTML在线编辑使用的地方 新闻发布系统的新闻内容区 文章管理系统的文章内容区 留言本的留言内容区 电子邮箱编辑内容区 软件下载系统的下载说明区 网络办公系统的文档内容区 网络商店系统的产品说明区 论坛BBS系统的贴子内容区 影视系统的影视媒体说明区 ......等等. 本课题主要研究的问题 系统总体设计 在线编辑器DHTML相关技术 在线编辑器的界面的设计与实现 在线编辑器的文本编辑功能的设计与实现 在线编辑器其它主要功能的设计与实现 在线编辑器DHTML相关技术 CSS技术:用来实现编辑器界面的动果,通过对像事件动态的修改对像的样式.实现事件前,中,后中网页出现不同的效果. JAVASCRIPT技术:脚本语言,用来控制对像的CSS样式,同时控DOM,响应各种用户事件而对网页做出不同的修改.是客户端代码,在客户端执行.所以更快速. DOM 是以层次结构组织的节点或信息片断的集合。同样是通过JAVASCRIPT的控制来实现编辑器的各种功能. 在线编辑器DHTML相关技术 DHTML意味着你把它从网站上下载下来了以后不需要再经过服务器处理.它会在浏览器中自动转换文档的内容,排版风格. 系统总体设计 效果图： 主页面代码框架 HTML HEAD titlehtml在线编辑器/title !--引入css文件-- LINK href=editorcss/MyEditor.css type=text/css rel=stylesheet !--引入js文件-- SCRIPT language=Javascript src=editorjs/editor.js/SCRIPT /HEAD BODY table table!--工具栏--/table !—空白网页做为编辑区-- tableIFRAME id=MyEditor src=about:blank /IFRAME/table table--模式切换栏 --/table /table /BODY /HTML 系统总体设计 系统结构图 由css+hmtl+dom组成编辑器接口,功能同javascript实现. 文件结构 基本功能流程图 基本功能流程图 文本编辑功能的设计与实现 要实现一个功能可以有多种方法.比如,要修改编辑器的字体或者内容时可以编辑器的内容重新输出.而更好的方法是使用Document.execCommand()方法,. bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue]) 参数:sCommand 必须的. 字符串指定命令执行。这个命令可以是文档中可执行的任何命令标识符。bUserInterface 可选的. Boolean 型. vValue 默认false不显示用户接口 界面样式变换设计 功能键为图片 插入和修改图片的实现 程序流程图如下: 查找和替换功能 程序流程图如下: 结束语 经过测试，本系统基本上达到了预期的要求， 能够完成基本的文本编辑,还有图片的插入与修改,转成word功能. 但系统也存在一些缺点： (1) 表格修改功能 (2)不能上传图片 (3)动态样式的修改只能修改引入的CSS文件 展望 (1) 进一步的实现表格的修改 (2) 实现数据的保存,回退也能保持原来的状态 (3) 可以让客户选择自己喜欢的外观,可以用jav