轻量级web富文本框——wangEditor使用手册(4)——配置下拉菜单

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源码解读视频

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。