1. 引言

上一节（第三节）《轻量级web富文本框——wangEditor使用手册（3）——如何自定义配置菜单》描述了如何自定义配置一个新加入的菜单。在第二节中我们演示了如何添加一个简单的菜单，这一节我们要加入一个稍微复杂一点的菜单——下拉菜单类型——增加一个“设置标题”下拉按钮

下载地址：https://github.com/wangfupeng1988/wangEditor

demo演示：http://www.cnblogs.com/wangfupeng1988/p/4185508.html

交流QQ群：164999061

2. wangEditor菜单类型

回顾第二节内容，在【3.1类型分析】这一小节，我们介绍过wangEditor中一共有3中菜单类型：

1. 基本菜单：一步操作（鼠标点击、快捷键）即可完成，无需选择、无需输入，例如“加粗”、“列表”、“居中”等；
2. 下拉框菜单：点击按钮只是为了弹出下拉框，而下拉框才是真正的执行者，需要选择一个下拉框的选项；
3. 弹出框菜单：点击按钮只是为了弹出框，在弹出框中需要填写若干内容，弹出框中的某个按钮才是真正的执行者；

第二节中所演示的“缩进”按钮属于第一种类型——基本菜单，这一节的“设置标题”属于第二种各类型——下拉框菜单。

3. 加入“设置标题”按钮

3.1 引用第一节代码

新建一个html页面，引用第一节的代码（没看过第一节的朋友，可以先去看一下）：

3.2 “设置标题”的菜单配置

在第二节添加"缩进"按钮的时候，我们就做过菜单的配置。下面是“设置标题”按钮的菜单配置：

接下来我们将一步一步讲解这些菜单的配置

3.3 menuId & 标题 & txt & callback & 快捷键

在上图中：

1. 【‘head‘】为menuId，这个标识符不能和其他menuId重复；
2. 【‘title‘: ‘设置标题‘】这是标题，自己随便取的名字，鼠标防止在菜单上时，将显示标题；
3. 【‘txt‘: ‘fa fa-flag-o‘】是fontAwesome的字体样式；
4. 【‘callback‘: function(){...}】自定义的callback函数，命令执行后系统将调用；
5. 另外，下拉框类型的菜单不支持快捷键；

其实，以上这几条，在第二节中都已经详细描述了，此处就点到为止，不再赘述，不明白的朋友可以去看第二节内容。

3.4 ‘type‘: ‘dropMenu‘

第二节加入“缩进”按钮时，type是‘btn‘，因为那是一个基本按钮。我们这里的“设置标题”是下拉框按钮，所以type类型是‘dropMenu‘。

另外，第三种菜单类型的type为‘modal‘，这个接下来的文章会专门说。

3.5 ‘dropMenu‘: (function(){....})()

只要type类型是‘dropMenu‘的菜单配置，都必须有一个‘dropMenu‘属性，它要取得一个$(ul)。ul中的每一个li（其实是li中的链接a），都保存了下拉框中的每个值。

而这个值，就存储在特定的commandValue属性中。如上图的commandValue属性，就存了每个li的值。

3.6 command

在第二节加入“缩进”按钮时，其中也有command属性。不过那里的command和此处的command不同，不同点在于——举个例子：

1. document.execCommand(‘indent‘);   
2. document.execCommand(‘formatBlock‘, false, ‘<h2>‘);

发现区别了没有，第二节中的——即基本按钮配置时——command执行的只是一个参数的操作。因为它是基本操作，不需要第三个参数，只需要一个命令即可，不需要值。

例如“加粗”、“斜体”、“缩进”，这些只需要一个‘bold‘、‘italic‘、‘indent‘一个命令即可。而“设置标题”按钮，需要的不仅仅是‘formatBlock‘这个命令，它还需要知道将要设置的标题是 h1/h2/h3/h4还是P？这个值，系统要从下拉框的每个li的commandValue属性中寻找。

基本按钮，即一个参数操作的command命令，在第二节【3.9 command（document.execCommand命令名称）】已经讲解，可取参考。

需要传入参数的command命令，在《javascript高级程序设计-第三版》中列出来常用的几个（不过不一定都适合用下拉框，有的适合用弹出框），其中绿色部分已经在wangEditor中实现，貌似就剩下本文正在演示的“formatBlock”了。

3.7 加入到菜单栏

以上已经配置好了“设置链接”的菜单配置，下面要加入到菜单栏了。如果看过第二节、第三节的内容，再看以下代码应该不是难事儿。加入菜单栏之后，wangEditor将自动为按钮生成下拉菜单。效果如下：

4. 总结

本文简单介绍了下拉框按钮的实现方式，其实从这种配置方式上也可以看出wangEditor的设计方式。

本文中的代码可以从下载内容的【demo_head.html】中获取。下一篇我们将来一点cool的内容——插入代码！

-------------------------------------------------------------------------------------------------------------

下载地址：https://github.com/wangfupeng1988/wangEditor

demo演示：http://www.cnblogs.com/wangfupeng1988/p/4185508.html

交流QQ群：164999061

-------------------------------------------------------------------------------------------------------------

欢迎关注我的微博。

也欢迎关注我的教程：

《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》

-------------------------------------------------------------------------------------------------------------