####前言 - 『行高』菜單是一個dropList類型的菜單，因為點擊它要彈出一個下拉列表，然后再選擇操作。 - 『行高』菜單的擴展過程和『縮進』菜單一樣，除了`custom-menu.js`的內容不一樣。**所以請先閱讀上一節『縮進』菜單的創建過程。** - 因此，本節直接略過其他過程，直接分析`custom-menu.js`文件源碼。 ----- ####編寫 `custom-menu.js` 直接貼出`custom-menu.js`的源碼，里面有非常詳細的注釋。 ```js (function () { // 獲取 wangEditor 構造函數和 jquery var E = window.wangEditor; var $ = window.jQuery; // 用 createMenu 方法創建菜單 E.createMenu(function (check) { // 定義菜單id，不要和其他菜單id重復。編輯器自帶的所有菜單id，可通過『參數配置-自定義菜單』一節查看 var menuId = 'lineheight'; // check將檢查菜單配置（『參數配置-自定義菜單』一節描述）中是否該菜單id，如果沒有，則忽略下面的代碼。 if (!check(menuId)) { return; } // this 指向 editor 對象自身 var editor = this; // 由于瀏覽器自身不支持 lineHeight 命令，因此要做一個hook editor.commandHooks.lineHeight = function (value) { var rangeElem = editor.getRangeElem(); var targetElem = editor.getSelfOrParentByName(rangeElem, 'p,h1,h2,h3,h4,h5,pre'); if (!targetElem) { return; } $(targetElem).css('line-height', value + ''); }; // 創建 menu 對象 var menu = new E.Menu({ editor: editor, // 編輯器對象 id: menuId, // 菜單id title: '行高', // 菜單標題 commandName: 'lineHeight', // 命令名稱 // 正常狀態和選中裝下的dom對象，樣式需要自定義 $domNormal: $('<a href="#" tabindex="-1"><i class="wangeditor-menu-img-text-height"></i></a>'), $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-text-height"></i></a>') }); // 數據源 var data = { // 格式： 'value' : 'title' '1.0': '1.0倍', '1.5': '1.5倍', '1.8': '1.8倍', '2.0': '2.0倍', '2.5': '2.5倍', '3.0': '3.0倍' }; // 為menu創建droplist對象 var tpl = '<span style="line-height:{#commandValue}">{#title}</span>'; menu.dropList = new E.DropList(editor, menu, { data: data, // 傳入數據源 tpl: tpl // 傳入模板 }); // 增加到editor對象中 editor.menus[menuId] = menu; }); })(); ``` ----- ####效果 運行頁面的效果如下：