####前言 - 把擴展菜單的`js`文件寫在一個獨立的文件中，命名為`custom-menu.js`，這個文件最終要引用到頁面中。 - **將要擴展的『縮進』菜單的id命名為 `indent`** 。菜單id不能已有的菜單的id重復，現有菜單的id，可參見『參數配置 - 自定義菜單』 ------- ####頁面 假設現在`custom-menu.js`已經編寫完成（下文將描述該文件如何編寫），要引用到頁面中。而且頁面中還有對`editor.config.menus`配置以顯示剛剛擴展的菜單，詳情可參見『參數配置 - 自定義菜單』。例如： ```html <div id="div1"> <p>請輸入內容...</p> </div> <script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../dist/js/wangEditor.min.js"></script> <!--注意：custom-menu.js一定要在wangEditor.min.js引用之后再引用--> <script type="text/javascript" src="./js/custom-menu.js"></script> <script type="text/javascript"> var editor = new wangEditor('div1'); editor.config.menus = [ 'source', '|', 'bold', // 通過自定義菜單，讓新配置的菜單顯示在頁面中。 // 上文已經確定，新配置的『縮進』菜單id為 'indent' 'indent' ]; editor.create(); </script> ``` ---- ####編寫 `custom-menu.js` 可直接查看源代碼，里面有詳細的注釋描述 ```js (function () { // 獲取 wangEditor 構造函數和 jquery var E = window.wangEditor; var $ = window.jQuery; // 用 createMenu 方法創建菜單 E.createMenu(function (check) { // 定義菜單id，不要和其他菜單id重復。編輯器自帶的所有菜單id，可通過『參數配置-自定義菜單』一節查看 var menuId = 'indent'; // check將檢查菜單配置（『參數配置-自定義菜單』一節描述）中是否該菜單id，如果沒有，則忽略下面的代碼。 if (!check(menuId)) { return; } // this 指向 editor 對象自身 var editor = this; // 創建 menu 對象 var menu = new E.Menu({ editor: editor, // 編輯器對象 id: menuId, // 菜單id title: '縮進', // 菜單標題 // 正常狀態和選中狀態下的dom對象，樣式需要自定義 $domNormal: $('<a href="#" tabindex="-1"><i class="wangeditor-menu-img-indent-left"></i></a>'), $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-indent-left"></i></a>') }); // 菜單正常狀態下，點擊將觸發該事件 menu.clickEvent = function (e) { // 找到當前選區所在的 p 元素 var elem = editor.getRangeElem(); var p = editor.getSelfOrParentByName(elem, 'p'); var $p; if (!p) { // 未找到 p 元素，則忽略 return e.preventDefault(); } $p = $(p); // 使用自定義命令 function commandFn() { $p.css('text-indent', '2em'); } editor.customCommand(e, commandFn); }; // 菜單選中狀態下，點擊將觸發該事件 menu.clickEventSelected = function (e) { // 找到當前選區所在的 p 元素 var elem = editor.getRangeElem(); var p = editor.getSelfOrParentByName(elem, 'p'); var $p; if (!p) { // 未找到 p 元素，則忽略 return e.preventDefault(); } $p = $(p); // 使用自定義命令 function commandFn() { $p.css('text-indent', '0'); } editor.customCommand(e, commandFn); }; // 根據當前選區，自定義更新菜單的選中狀態或者正常狀態 menu.updateSelectedEvent = function () { // 獲取當前選區所在的父元素 var elem = editor.getRangeElem(); var p = editor.getSelfOrParentByName(elem, 'p'); var $p; var indent; if (!p) { // 未找到 p 元素，則標記為未處于選中狀態 return false; } $p = $(p); indent = $p.css('text-indent'); if (!indent || indent === '0px') { // 得到的p，text-indent 屬性是 0，則標記為未處于選中狀態 return false; } // 找到 p 元素，并且 text-indent 不是 0，則標記為選中狀態 return true; }; // 增加到editor對象中 editor.menus[menuId] = menu; }); })(); ``` ---- #### 最終效果 最終運行頁面的效果如下：