####前言 - 把扩展菜单的`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; }); })(); ``` ---- #### 最终效果 最终运行页面的效果如下：