####前言 - 『插入符號』菜單是一個dropPanel類型的菜單，因為點擊它要彈出一個面板Panel，然后再進行其他操作。 - 『插入符號』菜單的擴展過程和『縮進』菜單一樣，除了`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 = 'symbol'; // 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-omega"></i></a>'), $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-omega"></i></a>') }); // 要插入的符號（可自行添加） var symbols = ['∑', '√', '∫', '∏', '≠', '♂', '♀'] // panel 內容 var $container = $('<div></div>'); $.each(symbols, function (k, value) { $container.append('<a href="#" style="display:inline-block;margin:5px;">' + value + '</a>'); }); // 插入符號的事件 $container.on('click', 'a', function (e) { var $a = $(e.currentTarget); var s = $a.text(); // 執行插入的命令 editor.command(e, 'insertHtml', s); }); // 添加panel menu.dropPanel = new E.DropPanel(editor, menu, { $content: $container, width: 350 }); // 增加到editor對象中 editor.menus[menuId] = menu; }); })(); ``` ####效果 運行頁面的效果如下