基于類的多在線編輯器的設計

黃金春 杜娟嬌

摘要：當前常需要在web2.0網站設計中使用多個在線編輯器，一般設計模式使網頁較為臃腫。為此該文介紹一種基于類的多在線編輯器設計思路，并提供了相關的主要代碼，實踐證明該方法不但能較好的解決網頁臃腫問題還可以加快網頁加載速度。其代碼均JavaScript程序設計，讀者也可根據此思路用于其他方面。

關鍵詞：多在線編輯器;類設計;JavaScript

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2020）16-0089-02

1 前言

在進行web2.0網站設計時，在線編輯器作為一種實用的內容輸入平臺常常在網頁里進行使用，而在某些特殊的場合一個網頁里甚至會使用到多個在線編輯器（比如在進行網絡教學平臺設計的時候，在設計題目輸入方面，題干部分需要用到在線編輯器，題目里的每個選擇也需要用到在線編輯器）。這種情況下，必將涉及多在線編輯器設計問題。比較常用的方法是，為每個需要的編輯器都設計html代碼，并且為了區分不同在線編輯器內容或操作，引入大量的id，這樣不但使網頁非常龐大，也會產生非常多的id，使得網頁的加載非常緩慢，影響用戶的體驗。在此介紹一種基于JavaScript類的多在線編輯器的設計，實踐證明該設計不但可以大大減少網頁的代碼量，同時也減少id的使用。

2 JavaScript類的定義及使用

JavaScript是web前端最為常用的一種應用程序，也是進行在線編輯器設計的程序。JavaScript1.5 版本后提供了很多新的特征[1]，其中最為吸引人的就是引入了類的概念。只是在JavaScript里類和java里的類定義并不一樣。

在JavaScript中沒有明確的類定義語法，它是一種以對象為主的設計方式，主要語法為：

3 基于類設計的在線編輯器原理

4 基于類設計的在線編輯器的實現

4.1 在線編輯器類的工作流程

4.2 在線編輯器類的外觀設計

在線編輯器的外觀設計并不復雜，可以使用現在常用的html和css進行設計，這不是本文關鍵點，在此不做詳細說明。這里僅說明需要注意的問題，編輯器的html文檔僅是部分的html代碼。之所以是部分html代碼主要是因為，在線編輯器并不作為原來網頁的一個內容，而是單獨作為一個模塊。當需要它時才在原來網頁里加載。

4.3 在線編輯器類設計

4.3.1 類的屬性設計

類的設計是整個設計的核心，因為要進行區分多個對象實例，所以設計編輯器構造函數時，需要增加記錄是第幾個對象作為屬性參數，此外還需要有存儲其寬度、對應的浮動編輯框等等屬性。類設計核心代碼示例如下：

4.3.2 類的方法設計

編輯器類還要包括一些必要的方法，這些方法分兩種類型，一種是修改編輯器的某些屬性的方法，如寬度等。

另一種是實現編輯器功能的方法，這是編輯器類的重要方法，具體功能設計是JavaScript程序編寫，功能方面內容在很多文章里都介紹有，例如：讓瀏覽器執行命令使用execCommand方法[2]。在此僅說明類方面的設計部分，這個部分設計關鍵有兩點，首先是語法必須按照JavaScript類方法來設計，其次在進行對象操作時，必需使用this引用。其主要代碼如下所示：

4.4 在線編輯器類的共有方法設計

編輯器除了自已的方法外，還需要一些共用的方法，例如，當需要進行某些對話操作時，要先對網頁進行層遮蓋，這些方法并不需要區分是哪個編輯器操作的，因此設計為共有的方法，其實就是原JavaScript的函數語法，類似代碼如下：

4.5 編輯器類的使用

4.5.1 在網頁里設置定位

4.5.2 使用JavaScript進行加載編輯器代碼

在JavaScript里使用共有函數進行查找所有class，并加載對應的在線編輯器代碼。主要代碼如下：

4.5.3 實現在線編輯器的功能按鈕單擊

編輯器里的功能按鈕，主要指那些工具欄里的按鈕，其可以使用onclick事件進行，示例代碼如下：

在JavaScript里設置對應函數實現單擊功能，該函數首先使用JavaScript的Event對象[3]獲取單擊事件的源，即獲得是什么單擊，然后獲得事件源對應的編輯器編號（就是產生實例的那個參數），即是哪個編輯器進行了單擊，然后調用對應的編輯器對象完成操作，主要代碼如下：

5 小結

在web2.0模式下，網頁設計中都包括有在線編輯器的需求，而對于那些需進行多輸入的情況，往往會在一個網頁里需要多個文本編輯器。在自行設計時，筆者采用了類設計的模式，實踐證明它是一種可以縮小程序規模，加快頁面加載速度的辦法。本文沒有介紹如何實現在線編輯器各種功能，有興趣的讀者可在網上查閱，這方面的內容很多。

參考文獻：

[1] Cody Lindley.JavaScript啟示錄[M].徐濤，譯.北京：人民郵電出版社，2016.

[2] Mozilla and individual contributors Document.execCommand（）[EB/OL].[2019-12-20].https：//developer.mozilla.org/en-US/docs/Web/API/Document/execCommand.

[3] w3school HTML DOM Event 對象[EB/OL].[2019-12-20].https：//www.w3school.com.cn/jsref/dom_obj_event.asp.

【通聯編輯】謝媛媛