設(shè)計所見即所得編輯器例程庫過程詳解(已修改)
2025-05-23 21:12 本頁面
【正文】 設(shè)計 所見即所得編輯器 例程庫過程詳解 設(shè)計 所見即所得編輯器 例程庫過程詳解 20210406 12： 11設(shè)計 所見即所得編輯器 例程庫過程詳解 發(fā)表于 2021,January 18,5： 14 PM 也許你已經(jīng)習(xí)慣于使用 Word 進行文檔的編寫和編輯，因為它提供了強大的所見即所得 類型的編輯器，使得對文檔的編排更容易進行，但是 Word 畢竟是只能在單機使用，如果也想在 Web 上使用類似 Word 的功能怎么辦呢 ?這個問題其實很多的論壇程序已經(jīng)給出了答案：集成 Web形式的 所見即所得 編輯器控件 (這里說的控件并不是指微軟的 ActiveX)。目前比較成熟的 Web 形式的 所見即所得 編輯器有兩個： TinyMCE 和 FCKEditor。 其中的 TinyMCE，從名字中就可以看出， Tiny 本來就有小的意思，其實它并不小，而是輕量級的，集成它特別簡單，簡單到只需兩行代碼 (當(dāng)然其它的圖片資源文件是要首先放在合適的位置 )，然而輕量級并不意味著簡單， TinyMCE能實現(xiàn) Word 的許多基本功能，并且程序支持自定義，可以簡易的對其進行擴展。 FCKEditor 可以說是 Web形式的 所見即所得 編輯器的大哥大， 從其網(wǎng)站上面的演示即可看出，它提供了許多的工具欄，并且加入了 Web 中經(jīng)常使用的一些元素的直接操作 (按鈕 )，可完全定制的樣式和工具欄按鈕顯示，多種語言的自動檢測并顯示，等等等等，要查看關(guān)于它的更多信息，請訪問它的網(wǎng)站。 值得一提的還有另外一件事：上面提到的兩個 Web形式的 所見即所得 編輯器都是 OpenSource 的，不必?fù)?dān)心侵權(quán)： ) 本文將以集成 TinyMCE 為例進行講解，畢竟集成它還是比較簡單的： ) 本文將按照真實項目的方式來講解，其中涉及到需求報告的形成、概要設(shè)計、詳細(xì)設(shè)計、編碼、測試、發(fā)布、維護等 等階段。 ^_^看了上面的介紹是不是很興奮 ?本文作者也想那樣寫，不過畢竟這是個人作品，沒有太多的條條框框的束縛，能省的就省了： ) 本文將按照下面的步驟進行講解： 程序界面構(gòu)思及界面區(qū)域劃分，根據(jù)界面區(qū)域劃分，確定每個區(qū)域需要實現(xiàn)的功能 設(shè)計第二點中的功能 (編寫各種數(shù)據(jù)庫元素，比如表單、視圖、子表單、代理等 ) 集成 TinyMCE 測試并發(fā)布 第一節(jié)程序界面構(gòu)思及界面區(qū)域劃分 為了能更好的表現(xiàn)完成后的作品，以及對其進行介紹，例庫使用三個頁面來表現(xiàn)：本數(shù)據(jù)庫簡介、編輯器演示和所有演示文檔。 其中 本數(shù)據(jù)庫簡介 頁面主要用來對本數(shù)據(jù)庫進行介紹以及對 TinyMCE 進行一些簡單的介紹，讓使用者首先了解一些基本的內(nèi)容； 編輯器演示 頁面就是集成 TinyMCE 之后的頁面，用以對其功能進行演示； 所有演示文檔 頁面用來顯示所有保存的演示文檔，任何人都可以對其進行編輯和刪除。 界面基本上就是這三個頁面，但是為了讓例庫更美觀，需要加入網(wǎng)頁設(shè)計中常用的 Banner 和 Footer。 Banner 使用作者設(shè)計的圖片，圖中顯示了編輯器一部分，可以直觀的看出本數(shù)據(jù)庫的用途， Footer 部分主要是版權(quán)的顯示。 構(gòu)思好的界面以及區(qū)域劃分見下圖。 第二節(jié)子表單設(shè)計 經(jīng)過規(guī)劃好的界面，需要使用一種設(shè)計元素來表現(xiàn)出來，在 DreamWeaver等工具中，這個過程就是創(chuàng)建 頁面 ，而在 Domino 中，頁面的作用已經(jīng)不是很大，表單承擔(dān)起了幾乎全部界面的表現(xiàn)和動態(tài)執(zhí)行等工作，其實也可以理解，因為在 DreamWeaver 中，頁面里面是需要嵌入一個或者多個表單，這樣的頁面才是 有生命 的頁面。 在第一節(jié)中，已經(jīng)將界面規(guī)劃好了，共三個表單，每個表單分為三個部分：頂部的 Banner，中間的內(nèi)容部分、底部的 Copyright 部分。由于每個表單都有頂部的 Banner 和底部 的 Copyright 部分，所以這兩部分可以做成一種通用的元素，在 Domino 中已經(jīng)考慮到了這個需求，那就是：子表單。子表單可以在數(shù)據(jù)庫標(biāo)簽里面的 共享代碼 里面找到。 下面講解建立子表單的過程。 要建立子表單，需要在數(shù)據(jù)庫標(biāo)簽中展開 共享代碼 ，然后單擊其中的 子表單 項，之后在 Designer 右側(cè)的視圖中就顯示出此數(shù)據(jù)庫中已經(jīng)存在的子表單，如果是新建的數(shù)據(jù)庫，列表就是空的，單擊列表上方的 新建子表單 按鈕，Designer 打開一個空白的子表單設(shè)計界面，我們可以在其中進行設(shè)計工作，下面我們以建立用于表現(xiàn)頂部 Banner 部分的子表單為例來講解。 頂部的 Banner 為了取得比較好的視覺效果，我們用圖片來表現(xiàn)它，這時就需要使用我們掌握的 HTML 知識了，表現(xiàn)圖片的 HTML 方式的代碼如下： 上面代碼中的 jpg只是圖片的一種類型，當(dāng)然也可以換成其它類型，為了讓圖片路徑更簡單，我們可以直接將圖片放到數(shù)據(jù)庫的資源里面，然后在需要使用的地方就可以用 /數(shù)據(jù)庫名 /圖片名 的方式來調(diào)用圖片了，設(shè)計好的頂部Banner 子表單 (命 名為 TopBanner)的界面如下圖所示 圖中的 ThisDB域是一個 顯示時計算 的域，計算公式為： @WebDbName 就是取當(dāng)前數(shù)據(jù)庫的名稱 (帶路徑 )，然后加上斜線和圖片名字，最后還要將這行代碼內(nèi)置為 HTML(選中要內(nèi)置的行，然后選擇菜單中的 文本 內(nèi)置HTML)，都設(shè)計好之后，將子表單保存，然后關(guān)閉。 底部 Footer 部分的設(shè)計過程和 Banner 部分的類似，只不過使用了更復(fù)雜的 HTML 代碼，用表格的形式來表現(xiàn)，設(shè)計好的 footer 部分的子表單如下圖所示： 這樣一來，表現(xiàn)頂部的 Banner部分和底部的 Footer 部分的子表單就設(shè)計好了，如何在設(shè)計過程中使用子表單，請查看本文的 表單設(shè)計 一節(jié) (第三節(jié) ) 第三節(jié)表單設(shè)計 上面第二節(jié)中講過，在 Domino 的 Web開發(fā)中，主要是使用表單來表現(xiàn)用戶界面，本節(jié)就講述表單的設(shè)計過程。 經(jīng)過第二節(jié)的子表單的設(shè)計，一些通用的元素已經(jīng)設(shè)計出來了，為了在表單中取得當(dāng)前服務(wù)器的 CGI 信息，本例庫中還設(shè)計了一個 CGI子表單，用來取得 CGI 的值，首先將 CGI 子表單加入到表單中。 注意：某些域的放置順序 (表單的上
范文總結(jié)相關(guān)推薦
鄂ICP備17016276號-1