『行高』菜单
最后更新于：2022-04-01 23:43:17
####前言
- 『行高』菜单是一个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: $(''),
$domSelected: $('')
});
// 数据源
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 = '{#title}';
menu.dropList = new E.DropList(editor, menu, {
data: data, // 传入数据源
tpl: tpl // 传入模板
});
// 增加到editor对象中
editor.menus[menuId] = menu;
});
})();
```
-----
####效果
运行页面的效果如下：
';