设计所见即所得编辑器例程库过程详解设计"所见即所得编辑器"例程库过程详解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"域是一个"显示时计算"的域，计算公式为：@WebDbName就是取当前数据库的名称(带路径)，然后加上斜线和图片名字，最后还要将这行代码内置为HTML(选中要内置的行，然后选择菜单中的"文本"-"内置HTML")，都设计好之后，将子表单保存，然后关闭。
底部Footer部分的设计过程和Banner部分的类似，只不过使用了更复杂的HTML代码，用表格的形式来表现，设计好的footer部分的子表单如下图所示：这样一来，表现顶部的Banner部分和底部的Footer部分的子表单就设计好了，如何在设计过程中使用子表单，请查看本文的"表单设计"一节(第三节)第三节表单设计上面第二节中讲过，在Domino的Web开发中，主要是使用表单来表现用户界面，本节就讲述表单的设计过程。
经过第二节的子表单的设计，一些通用的元素已经设计出来了，为了在表单中取得当前服务器的CGI信息，本例库中还设计了一个"CGI"子表单，用来取得CGI的值，首先将CGI子表单加入到表单中。
注意：某些域的放置顺序(表单的上面和下面)都有关系，注意将下面用到其值的域放在上面。
要建立表单，需要在左侧的数据库书签中找到表单分类，然后在右侧的表单列表中单击"新建表单"按钮，一个空白的表单就显示在Designer中，要将CGI子表单加入到表单中，需要单击菜单：创建--资源-插入子表单，然后在弹出的对话框中选择"CGI"子表单，如下图所示：单击"确定"按钮，即可将子表单插入到表单中的光标位置，如果为了在设计界面中显示更多的其它元素，还可以将子表单做成计算类型的，那样就需要在"插入子表单"对话框中，选中对话框底部的"根据公式插入子表单"复选框，这样就不能用鼠标选定子表单来插入，而要先单击对话框中的"确定"按钮，然后在表单中显示的"计算子表单"上面单击一下，在下面的代码框中填写要插入的子表单的名字，如下图所示：插入子表单后，还要进行表单功能以及界面的设计，这就需要用到基本的Web页面语言HTML了，还有就是要使用Domino本身的的设计元素来实现所需要的功能(比如用按钮来触发某个事件)，为了让Domino服务器能正确解释我们输入的HTML代码，我们需要将输入的HTML代码内置为HTML(选中需要内置的部分，选择菜单：文本--内HTML)，这样Domino服务器就能正确按照我们所写的代码来显示表单，下图为设计好的"HTMLFormAdv"表单(此表单用来实现"所见即所得"编辑器的功能)。
图中的HTML代码在此不做解释，因为在任何一本讲解Web开发的入门书籍中都有对它们的解释，下面主要讲解其中的Domino特有的设计元素：域和按钮。
域Domino中的域有两种，一种是域名的域，还有另外一种域是用来输入或者显示内容的域，也就是HTML语言中的input类型为文本的元素，本文主要讲解后一种域。
Domino中的域比HTML中的简单的文本输入框要复杂的多，它可以被设置成各种类型(比如文本、密码、RTF、数值、单选按钮、复选按钮等等，可以通过域的属性窗口进行调整)，上图所示表单中的"Subject"域的属性窗口如下图所示：从图中可以看到，Domino的域可以设置将近20种类型，并且可以通过类型右侧的下拉列表选择域是否可以输入还是使用计算方式显示。
本例库中的Subject域只是用来输入文档的标题，所以就只设置为"文本"类型，并且可以编辑(也就是可以输入内容)，并且默认值为空，也就是在用这个表单新建文档的时候，这个域是空白的，如下图所示：在标题域的下面，还有一个"yimingstudio"域，类型为RTF，可编辑类型，由于集成"所见即所得"编辑器需要一个HTML Area元素，而在Domino中只有RTF类型的域在Web中能自动转换成这种类型，所以我们把它作为"所见即所得"编辑器的载体，关于集成TinyMCE的讲解将在后面详细阐述，这个域的属性如下图所示：HTML属性如下图所示：按钮Domino中的按钮和HTML中的功能相同，都是用来触发某些事件。
不过Domino中的按钮使用起来更灵活一些，可以自由设定其显示效果，可以通过CSS来进行效果的调整等等。
本例库中的按钮分为两类：一类是在Web页面中能看到的按钮，一类是在Web页面中看不到的按钮。
[blockquote style="margin-right：0px；"dir="ltr"]在Web中能看到的按钮此类按钮用来在Web页面中来实现各种功能的提示以及执行事件之前的确认，比如在删除之前的确认，可见按钮的图片如下：此表单共有三个可见按钮，用来实现对文档的操作(保存、编辑和删除)，并且每个按钮都有不同的隐藏条件，因为按钮需要在文档的不同状态下显示(编辑状态和读状态)；另外还需要为每个按钮编写相应的代码，才能让它在界面中显示出来，如果没有为按钮编写任何代码，在浏览器中将不会显示按钮。
要设置按钮的隐藏条件，需要打开按钮属性对话框，并选择相应的标签，如下图所示：上图是"编辑文档"按钮的属性窗口中的隐藏条件标签，从图中可以看出，只是勾选了几个复选框，就可以实现简单的隐藏，如果需要隐藏的元素有很多需要满足的条件，那就需要在下面的公式窗口中编写隐藏公式了，本文不对隐藏公式做介绍。