輕量級web富文字框——wangEditor使用手冊（4）——配置下拉式功能表

標籤：

1. 引言

上一節（第三節）《輕量級web富文字框——wangEditor使用手冊（3）——如何自訂配置菜單》描述了如何自訂配置一個新加入的菜單。在第二節中我們示範了如何添加一個簡單的菜單，這一節我們要加入一個稍微複雜一點的菜單——下拉式功能表類型——增加一個“設定標題”下拉按鈕

：https://github.com/wangfupeng1988/wangEditor

demo示範：http://www.cnblogs.com/wangfupeng1988/p/4185508.html

交流QQ群：164999061

2. wangEditor菜單類型

回顧第二節內容，在【3.1類型分析】這一小節，我們介紹過wangEditor中一共有3中菜單類型：

1. 基本菜單：一步操作（滑鼠點擊、快速鍵）即可完成，無需選擇、無需輸入，例如“加粗”、“列表”、“置中”等；
2. 下拉框菜單：點擊按鈕只是為了彈出下拉框，而下拉框才是真正的執行者，需要選擇一個下拉框的選項；
3. 彈出框菜單：點擊按鈕只是為了彈出框，在彈出框中需要填寫若干內容，彈出框中的某個按鈕才是真正的執行者；

第二節中所示範的“縮排”按鈕屬於第一種類型——基本菜單，這一節的“設定標題”屬於第二種各類型——下拉框菜單。

3. 加入“設定標題”按鈕3.1 引用第一節代碼

建立一個html頁面，引用第一節的代碼（沒看過第一節的朋友，可以先去看一下）：

3.2 “設定標題”的菜單配置

在第二節添加"縮排"按鈕的時候，我們就做過菜單的配置。下面是“設定標題”按鈕的菜單配置：

接下來我們將一步一步講解這些菜單的配置

3.3 menuId & 標題 & txt & callback & 快速鍵

在中：

1. 【‘head‘】為menuId，這個標識符不能和其他menuId重複；
2. 【‘title‘: ‘設定標題‘】這是標題，自己隨便取的名字，滑鼠防止在菜單上時，將顯示標題；
3. 【‘txt‘: ‘fa fa-flag-o‘】是fontAwesome的字型樣式；
4. 【‘callback‘: function(){...}】自訂的callback函數，命令執行後系統將調用；
5. 另外，下拉框類型的菜單不支援快速鍵；

其實，以上這幾條，在第二節中都已經詳細描述了，此處就點到為止，不再贅述，不明白的朋友可以去看第二節內容。

3.4 ‘type‘: ‘dropMenu‘

第二節加入“縮排”按鈕時，type是‘btn‘，因為那是一個基本按鈕。我們這裡的“設定標題”是下拉框按鈕，所以type類型是‘dropMenu‘。

另外，第三種菜單類型的type為‘modal‘，這個接下來的文章會專門說。

3.5 ‘dropMenu‘: (function(){....})()

只要type類型是‘dropMenu‘的菜單配置，都必須有一個‘dropMenu‘屬性，它要取得一個$(ul)。ul中的每一個li（其實是li中的連結a），都儲存了下拉框中的每個值。

而這個值，就儲存在特定的commandValue屬性中。如的commandValue屬性，就存了每個li的值。

3.6 command

在第二節加入“縮排”按鈕時，其中也有command屬性。不過那裡的command和此處的command不同，不同點在於——舉個例子：

1. document.execCommand(‘indent‘);   
2. document.execCommand(‘formatBlock‘, false, ‘<h2>‘);

發現區別了沒有，第二節中的——即基本按鈕配置時——command執行的只是一個參數的操作。因為它是基本操作，不需要第三個參數，只需要一個命令即可，不需要值。

例如“加粗”、“斜體”、“縮排”，這些只需要一個‘bold‘、‘italic‘、‘indent‘一個命令即可。而“設定標題”按鈕，需要的不僅僅是‘formatBlock‘這個命令，它還需要知道將要設定的標題是 h1/h2/h3/h4還是P？這個值，系統要從下拉框的每個li的commandValue屬性中尋找。

基本按鈕，即一個參數操作的command命令，在第二節【3.9 command（document.execCommand命令名稱）】已經講解，可取參考。

需要傳入參數的command命令，在《javascript進階程式設計-第三版》中列出來常用的幾個（不過不一定都適合用下拉框，有的適合用彈出框），其中綠色部分已經在wangEditor中實現，貌似就剩下本文正在示範的“formatBlock”了。

3.7 加入到功能表列

以上已經配置好了“設定連結”的菜單配置，下面要加入到功能表列了。如果看過第二節、第三節的內容，再看以下代碼應該不是難事兒。加入功能表列之後，wangEditor將自動為按鈕產生下拉式功能表。效果如下：

4. 總結

本文簡單介紹了下拉框按鈕的實現方式，其實從這種配置方式上也可以看出wangEditor的設計方式。

本文中的代碼可以從下載內容的【demo_head.html】中擷取。下一篇我們將來一點cool的內容——插入代碼！

-------------------------------------------------------------------------------------------------------------

：https://github.com/wangfupeng1988/wangEditor

demo示範：http://www.cnblogs.com/wangfupeng1988/p/4185508.html

交流QQ群：164999061

-------------------------------------------------------------------------------------------------------------

歡迎關注我的微博。

也歡迎關注我的教程：

《從設計到模式》《深入理解javascript原型和閉包系列》《微軟petshop4.0源碼解讀視頻》《json2.js源碼解讀視頻》

-------------------------------------------------------------------------------------------------------------

輕量級web富文字框——wangEditor使用手冊（4）——配置下拉式功能表