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

黃金春 杜娟嬌

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

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

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

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

1 前言

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

2 JavaScript類的定義及使用

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

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

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

4 基于類設計的在線編輯器的實現(xiàn)

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

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

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

4.3 在線編輯器類設計

4.3.1 類的屬性設計

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

4.3.2 類的方法設計

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

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

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

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

4.5 編輯器類的使用

4.5.1 在網(wǎng)頁里設置定位

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

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

4.5.3 實現(xiàn)在線編輯器的功能按鈕單擊

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

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

5 小結

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

參考文獻：

[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.

【通聯(lián)編輯】謝媛媛