设计所见即所得编辑器例程库过程详解.doc

设计 所见即所得编辑器 例程库过程详解 ? 设计所见即所得编辑器例程库过程详解2011-04-06 12：11设计所见即所得编辑器例程库过程详解 发表于2007,January 18,5：14 PM 也许你已经习惯于使用Word进行文档的编写和编辑，因为它提供了强大的所见即所得类型的编辑器，使得对文档的编排更容易进行，但是Word毕竟是只能在单机使用，如果也想在Web上使用类似Word的功能怎么办呢?这个问题其实很多的论坛程序已经给出了答案：集成Web形式的所见即所得编辑器控件(这里说的控件并不是指微软的ActiveX)。目前比较成熟的Web形式的所见即所得编辑器有两个：TinyMCE和FCKEditor。 其中的TinyMCE，从名字中就可以看出，Tiny本来就有小的意思，其实它并不小，而是轻量级的，集成它特别简单，简单到只需两行代码(当然其它的图片资源文件是要首先放在合适的位置)，然而轻量级并不意味着简单，TinyMCE能实现Word的许多基本功能，并且程序支持自定义，可以简易的对其进行扩展。 FCKEditor可以说是Web形式的所见即所得编辑器的大哥大，从其网站上面的演示即可看出，它提供了许多的工具栏，并且加入了Web中经常使用的一些元素的直接操作(按钮)，可完全定制的样式和工具栏按钮显示，多种语言的自动检测并显示，等等等等，要查看关于它的更多信息，请访问它的网站。 值得一提的还有另外一件事：上面提到的两个Web形式的所见即所得编辑器都是OpenSource的，不必担心侵权：-) 本文将以集成TinyMCE为例进行讲解，毕竟集成它还是比较简单的：-) 本文将按照真实项目的方式来讲解，其中涉及到需求报告的形成、概要设计、详细设计、编码、测试、发布、维护等等阶段。 ^_^看了上面的介绍是不是很兴奋?本文作者也想那样写，不过毕竟这是个人作品，没有太多的条条框框的束缚，能省的就省了：-) 本文将按照下面的步骤进行讲解： 程序界面构思及界面区域划分，根据界面区域划分，确定每个区域需要实现的功能 设计第二点中的功能(编写各种数据库元素，比如表单、视图、子表单、代理等) 集成TinyMCE 测试并发布 第一节程序界面构思及界面区域划分 为了能更好的表现完成后的作品，以及对其进行介绍，例库使用三个页面来表现：本数据库简介、编辑器演示和所有演示文档。 其中本数据库简介页面主要用来对本数据库进行介绍以及对TinyMCE进行一些简单的介绍，让使用者首先了解一些基本的内容；编辑器演示页面就是集成TinyMCE之后的页面，用以对其功能进行演示；所有演示文档页面用来显示所有保存的演示文档，任何人都可以对其进行编辑和删除。 界面基本上就是这三个页面，但是为了让例库更美观，需要加入网页设计中常用的Banner和Footer。Banner使用作者设计的图片，图中显示了编辑器一部分，可以直观的看出本数据库的用途，Footer部分主要是版权的显示。 构思好的界面以及区域划分见下图。 第二节子表单设计 经过规划好的界面，需要使用一种设计元素来表现出来，在DreamWeaver等工具中，这个过程就是创建页面，而在Domino中，页面的作用已经不是很大，表单承担起了几乎全部界面的表现和动态执行等工作，其实也可以理解，因为在DreamWeaver中，页面里面是需要嵌入一个或者多个表单，这样的页面才是有生命的页面。 在第一节中，已经将界面规划好了，共三个表单，每个表单分为三个部分：顶部的Banner，中间的内容部分、底部的Copyright部分。由于每个表单都有顶部的Banner和底部的Copyright部分，所以这两部分可以做成一种通用的元素，在Domino中已经考虑到了这个需求，那就是：子表单。子表单可以在数据库标签里面的共享代码里面找到。 下面讲解建立子表单的过程。 要建立子表单，需要在数据库标签中展开共享代码，然后单击其中的子表单项，之后在Designer右侧的视图中就显示出此数据库中已经存在的子表单，如果是新建的数据库，列表就是空的，单击列表上方的新建子表单按钮，Designer打开一个空白的子表单设计界面，我们可以在其中进行设计工作，下面我们以建立用于表现顶部Banner部分的子表单为例来讲解。 顶部的Banner为了取得比较好的视觉效果，我们用图片来表现它，这时就需要使用我们掌握的HTML知识了，表现图片的HTML方式的代码如下： 上面代码中的jpg只是图片的一种类型，当然也可以换成其它类型，为了让图片路径更简单，我们可以直接将图片放到数据库的资源里面，然后在需要使用的地方就可以用/数据库名/图片名的方式来调用图片了，设计好的顶部Banner子表单(命名为TopBanner)的界面如下图所示 图中的ThisDB域是一个显示时计算的域，计算公式为： @W