設計「所見即所得編輯器」例程庫過程詳解.pdf

www.LotusB Lotus 电子书下载基地 | 专门提供Lotus 相关书籍和资料... QQ 群 设计设计“所见即所得编辑器所见即所得编辑器”例程库过程详解例程库过程详解 设计设计 所见即所得编辑器所见即所得编辑器 例程库过程详解例程库过程详解 来源 : YiMing 整理 : www.LotusB 2007-10-24 [John] 也许你已经习惯于使用Word 进行文档的编写和编辑，因为它提供了强大的“所见即所得”类型的编辑器，使 得对文档的编排更容易进行，但是Word 毕竟是只能在单机使用，如果也想在Web 上使用类似Word 的功 能怎么办呢？这个问题其实很多的论坛程序已经给出了答案：集成Web 形式的“所见即所得”编辑器控件（这 里说的控件并不是指微软的ActiveX ）。目前比较成熟的Web 形式的“所见即所得”编辑器有两个：TinyMCE 和FCKEditor。 其中的TinyMCE ，从名字中就可以看出，Tiny 本来就有小的意思，其实它并不小，而是轻量级的，集成它 特别简单，简单到只需两行代码（当然其它的图片资源文件是要首先放在合适的位置），然而轻量级并不意 味着简单，TinyMCE 能实现Word 的许多基本功能，并且程序支持自定义，可以简易的对其进行扩展。 FCKEditor 可以说是Web 形式的“所见即所得”编辑器的大哥大，从其网站上面的演示即可看出，它提供了 许多的工具栏，并且加入了Web 中经常使用的一些元素的直接操作 （按钮），可完全定制的样式和工具栏 按钮显示，多种语言的自动检测并显示，等等等等，要查看关于它的更多信息，请访问它的网站。 值得一提的还有另外一件事：上面提到的两个Web 形式的”所见即所得“编辑器都是OpenSource 的，不必 担心侵权 :-) 本文将以集成TinyMCE 为例进行讲解，毕竟集成它还是比较简单的 :-) 本文将按照真实项目的方式来讲解，其中涉及到需求报告的形成、概要设计、详细设计、编码、测试、发 布、维护等等阶段。 ^_^ 看了上面的介绍是不是很兴奋？本文作者也想那样写，不过毕竟这是个人作品，没有太多的条条框框 的束缚，能省的就省了 :-) 本文将按照下面的步骤进行讲解： 1. 程序界面构思及界面区域划分，根据界面区域划分，确定每个区域需要实现的功能 2. 设计第二点中的功能 （编写各种数据库元素，比如表单、视图、子表单、代理等） 3. 集成TinyMCE 4. 测试并发布 第一节 程序界面构思及界面区域划分 为了能更好的表现完成后的作品，以及对其进行介绍，例库使用三个页面来表现：本数据库简介、编辑器 演示和所有演示文档。 其中”本数据库简介“页面主要用来对本数据库进行介绍以及对TinyMCE 进行一些简单的介绍，让使用者首 先了解一些基本的内容；”编辑器演示“页面就是集成TinyMCE 之后的页面，用以对其功能进行演示；”所有 演示文档“页面用来显示所有保存的演示文档，任何人都可以对其进行编辑和删除。 界面基本上就是这三个页面，但是为了让例库更美观，需要加入网页设计中常用的Banner 和Footer。Banner 使用作者设计的图片，图中显示了编辑器一部分，可以直观的看出本数据库的用途，Footer 部分主要是版 www.LotusB Lotus 电子书下载基地 | 专门提供Lotus 相关书籍和资料... QQ 群 权的显示。 构思好的界面以及区域划分见下图。 第二节 子表单设计 经过规划好的界面，需要使用一种设计元素来表现出来，在DreamWeaver 等工具中，这个过程就是创建“页 面”，而在Domino 中，页面的作用已经不是很大，表单承担起了几乎全部界面的表现和动态执行等工作， 其实也可以理解，因为在DreamWeaver 中，页面里面是需要嵌入一个或者多个表单，这样的页面才是”有 生命“ 的页面。 在第一节中，已经将界面规划好了，共三个表单，每个表单分为三个部分：顶部的Banner，中间的内容部 分、底部的Copyright 部分。由于每个表单都有顶部的Banner 和底部的Copyright 部分，所以这两部分可 以做成一