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

《设计所见即所得编辑器例程库过程详解》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、设计所见即所得编辑器例程库过程详解设计"所见即所得编辑器"例程库过程详解2011-04-0612：11设计"所见即所得编辑器"例程库过程详解发表于2007,January18,5：14PM也许你已经习惯于使用Word进行文档的编写和编辑，因为它提供了强大的"所见即所得"类型的编辑器，使得对文档的编排更容易进行，但是Word毕竟是只能在单机使用，如果也想在Web上使用类似Word的功能怎么办呢?这个问题其实很多的论坛程序已经给出了答案：集成Web形式的"所见即所得"编辑器控件(这里说的控件并不是指微软的ActiveX)。目前比较成熟的Web形式的"所见即所得"编辑器有两

2、个：TinyMCE和FCKEditor。其中的TinyMCE，从名字中就可以看出，Tiny本来就有小的意思，其实它并不小，而是轻量级的，集成它特别简单，简单到只需两行代码(当然其它的图片资源文件是要首先放在合适的位置)，然而轻量级并不意味着简单，TinyMCE能实现Word的许多基本功能，并且程序支持自定义，可以简易的对其进行扩展。FCKEditor可以说是Web形式的"所见即所得"编辑器的大哥大，从其网站上面的演示即可看出，它提供了许多的工具栏，并且加入了Web中经常使用的一些元素的直接操作(按钮)，可完全定制的样式和工具栏按钮显示，多种语言的自动检测并显示，等等等

3、等，要查看关于它的更多信息，请访问它的网站。值得一提的还有另外一件事：上面提到的两个Web形式的"所见即所得"编辑器都是OpenSource的，不必担心侵权：-)本文将以集成TinyMCE为例进行讲解，毕竟集成它还是比较简单的：-)本文将按照真实项目的方式来讲解，其中涉及到需求报告的形成、概要设计、详细设计、编码、测试、发布、维护等等阶段。^_^看了上面的介绍是不是很兴奋?本文作者也想那样写，不过毕竟这是个人作品，没有太多的条条框框的束缚，能省的就省了：-)本文将按照下面的步骤进行讲解：程序界面构思及界面区域划分，根据界面区域划分，确定每个区域需要实现的功能设计第二点

4、中的功能(编写各种数据库元素，比如表单、视图、子表单、代理等)集成TinyMCE测试并发布第一节程序界面构思及界面区域划分为了能更好的表现完成后的作品，以及对其进行介绍，例库使用三个页面来表现：本数据库简介、编辑器演示和所有演示文档。其中"本数据库简介"页面主要用来对本数据库进行介绍以及对TinyMCE进行一些简单的介绍，让使用者首先了解一些基本的内容；"编辑器演示"页面就是集成TinyMCE之后的页面，用以对其功能进行演示；"所有演示文档"页面用来显示所有保存的演示文档，任何人都可以对其进行编辑和删除。界面基本上就是这三个页面，但是为了让例库更美观，需要加入网页设计

5、中常用的Banner和Footer。Banner使用作者设计的图片，图中显示了编辑器一部分，可以直观的看出本数据库的用途，Footer部分主要是版权的显示。构思好的界面以及区域划分见下图。第二节子表单设计经过规划好的界面，需要使用一种设计元素来表现出来，在DreamWeaver等工具中，这个过程就是创建"页面"，而在Domino中，页面的作用已经不是很大，表单承担起了几乎全部界面的表现和动态执行等工作，其实也可以理解，因为在DreamWeaver中，页面里面是需要嵌入一个或者多个表单，这样的页面才是"有生命"的页面。在第一节中，已经将界面规划好了，共三个表单，每个表单

6、分为三个部分：顶部的Banner，中间的内容部分、底部的Copyright部分。由于每个表单都有顶部的Banner和底部的Copyright部分，所以这两部分可以做成一种通用的元素，在Domino中已经考虑到了这个需求，那就是：子表单。子表单可以在数据库标签里面的"共享代码"里面找到。下面讲解建立子表单的过程。要建立子表单，需要在数据库标签中展开"共享代码"，然后单击其中的"子表单"项，之后在Designer右侧的视图中就显示出此数据库中已经存在的子表单，如果是新建的数据库，列表就是空的，单击列表上方的"新建子表单"按钮，Designer打开一个空白的子表单设计界面，

7、我们可以在其中进行设计工作，下面我们以建立用于表现顶部Banner部分的子表单为例来讲解。顶部的Banner为了取得比较好的视觉效果，我们用图片来表现它，这时就需要使用我们掌握的HTML知识了，表现图片的HTML方式的代码如下：上面代码中的jpg只是图片的一种类型，当然也可以换成其它类型，为了让图片路径更简单，我们可以直接将图片放到数据库的资源里面，然后在需要使用的地方就可以用"/数据库名/图片名"的方式来调用图片了，设计好的顶部Banner子表单(命名为"TopBanner")的界面如下图所示图中的"ThisDB"域是一个"显示时计算"的域，计算公