『缩进』菜单
最后更新于：2022-04-01 23:43:15
####前言
- 把扩展菜单的`js`文件写在一个独立的文件中，命名为`custom-menu.js`，这个文件最终要引用到页面中。
- **将要扩展的『缩进』菜单的id命名为 `indent`** 。菜单id不能已有的菜单的id重复，现有菜单的id，可参见『参数配置 - 自定义菜单』
-------
####页面
假设现在`custom-menu.js`已经编写完成（下文将描述该文件如何编写），要引用到页面中。而且页面中还有对`editor.config.menus`配置以显示刚刚扩展的菜单，详情可参见『参数配置 - 自定义菜单』。例如：
```html
```
----
####编写 `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: $(''),
$domSelected: $('')
});
// 菜单正常状态下，点击将触发该事件
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;
});
})();
```
----
#### 最终效果
最终运行页面的效果如下：
';
请输入内容...