1. 引言

上一节《轻量级web富文本框——wangEditor使用手册（1）——基本应用》中我们讲解了如何应用wangEditor创建最基本的富文本编辑器，本节继续讲如何扩展一个简单的按钮。本节是继续上一节的内容来的，所使用的代码也是接着上一节的来的，错过的朋友请先看上一节，再看本节。

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

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

交流QQ群：164999061

2. “前戏”

一个具体的东西不可能满足所有人的要求，但是一个抽象的规则就有可能。

所以，我觉得软件不是被编码编出来的，而是被绞尽脑汁设计出来的。在工作中我有这样的体验：我从来不希望你给我的东西是完美的，但是至少你得支持让我自己去做到完美，而且能顺利的升级和更新。

话归正题，以上是wangEditor的默认的菜单——不多、也不少，但是肯定无法满足所有人的要求。例如，你可能还需要一个“缩进”，一个“选择标题”，一个“上传图片”，一个“插入代码”，一个“插入视频/语音”，一个“全屏”……好多好多——但是我把这几个功能考虑进去了之后，就完了吗？——当然没有，用户的需求是无限的。

但是通过二次开发和扩展，我就可以让使用者自己去实现这些功能。从我现在的设计来看，至少以上提到的这几种类型都是可以实现的。我们一步一步来，先从最简单的“缩进”功能开始，后面会慢慢介绍，直至全部实现这些功能。

3. 扩展一个“缩进”功能

3.1 分析类型

参考【2.“前戏”】中的那个图，可以看到wangEditor现在提供的所有菜单。我们可以为这些菜单分分类：

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

根据以上分类，发现“缩进”属于第一种类型。这就是我所说的“从最简单开始”的原因，当然了，下面两种类型后面文章都会讲解到。

3.2 借用上一节代码

上一节《轻量级web富文本框——wangEditor使用手册（1）——基本应用》中的代码，这里要继续借用。没看上一节的朋友，请先去补补课。截图如下：

3.3 先看看加入缩进之后的代码

在上一节代码的基础上，我们先看看加入缩进之后的代码是什么样子的。然后对照着代码，我们挨个讲解。

加入以上代码后，运行网页，我们会看到wangEditor的菜单栏中加入了两个自定义的按钮，而且鼠标放上之后，还会有title的提示：

接下来让我们慢慢解释这些配置项的意思。

3.4 menuId

新插入的代码中，“indent”和“outdent”是这两个按钮的id，类似与dom节点的id一样，它是按钮唯一的标识号，不能重复。重复的话，会导致后者覆盖前者。所以在定义的时候要特别注意。wangEditor中默认的菜单按钮的id如下，自定义id的时候，一定注意不要和这些id重复。

有编程经验的人都知道，取id名字和取变量名字一样，要用词义法，不要用“a1”、“b2”这样的名称，时间久了甚至连你自己都不认识了。

3.5 titile（标题）

在每个菜单配置中，title是必须写的！这里的title就随便去名字了，反正是写汉字，把这个按钮的名称写上就行了。

注意，有了title，按钮在鼠标放上之后，就会显示title。（如果有快捷键，也会连同一起显示，后文会讲到）

3.6 type（类型）

在上文的【3.1 分析类型】中，我们分析了wangEditor菜单按钮的三种类型，并确定“缩进”按钮属于第一种类型。

第一种类型我们就用“btn”来表示。其他两种类型分别用“dropMenu”和“modal”来表示，后面会有文章专门介绍。

3.7 txt （fontAwesome样式）

（在此提醒，不了解fontAwesome的朋友可以先去看看《请用fontAwesome代替网页icon小图标》，fontAwesome这个东西非常好，也很简单，建议大家一定要去用）

“缩进”作为一个按钮，它长什么模样？我们现在还没确定呢。

大家进入http://www.thinkcmf.com/font/icons#text-editor页面，会看到好几百个icon小图标。所有这里有的，都可以拿到wangEditor中来用，我选中的是“fa-indent”和“fa-outdent”，我想大部分人都会选择这两个的。

注意，不要忘记前面加上“fa ”，最后要组成“fa fa-indent”或“fa fa-outdent”这种格式，否则会不现实啊。其实，最终生成的代码就是<i class="fa fa-indent"></i>

3.8 hotKey（快捷键）

快捷键功能，可要可不要，看自己的需要。目前wangEditor中默认的快捷键有：

1. ctrl + b  加粗
2. ctrl + i 斜体
3. ctrl + u 下划线
4. ctrl + z 撤销

在这里，我给“增加缩进”加了一个快捷键“ctrl,shift + i”，另一个“减少缩进”没加快捷键。

注意，现在快捷键支持四个功能键的组合——“ctrl”、“shift”、“alt”、“meta”——外加一个字母。所以以下定义都是合法的：

1. "ctrl + z"
2. "ctrl,shift + i"
3. "ctrl,shift,alt + a"
4. "ctrl,shift,alt,meta + b"
5. "meta,ctrl + t"
6. …… （就不一一举例子了）

如果有快捷键，快捷键会连同title一起，当鼠标防止在按钮上时显示：

最后，选择快捷键请慎重！浏览器本身就有的快捷键，例如“ctrl + n”就不要用了，总之，加入快捷键之后，一定要做好测试！

3.9 command（document.execCommand命令名称）

做web富文本编辑器最最核心的知识，就是document.execCommand命令。什么？你没用过document.execCommand？——没关系，别着急。

我这里既然是作为wangEditor的扩展配置，不可能要求各个开发人员都熟练使用document.execCommand。你只需要知道一些基本操作的命令名称（例如“indent”），把它写到规定的位置就可以了。按照《javascript高级程序设计 - 第三版》中介绍，常用的基本命令（【3.1 分析类型】中介绍的第一种类型）有：

这里注意：

• 这里列出来的只是基本命令（【3.1 分析类型】中介绍的第一种类型），其他两种类型，该文章不涉及，后续会有文章介绍；
• 图中画框的目前wangEditor都已经实现了，所以留给大家的发挥余地不是特别多了；

3.10 callback（回调函数）

callback函数是在执行完一个按钮的命令之后，系统触发的。其中，callback函数中的this就是$editor。（$editor是什么？去上一节的【3. 使用富文本框】找答案吧）

3.11 传入自定义菜单

我们把自己定义好的菜单（可以是若干个，本文有“indent”和“outdent”两个）统一作为参数，传入到wangEditor()中（注意外面的两个“{ }”），wangEditor就会自动追加这两个按钮，并且实现它们的功能（包括鼠标点击和快捷键）。

4. 总结

本文用了很大的篇幅讲解如何添加两个功能很简单的“缩进”按钮，虽然只有简单的20+代码，但是想要说明白了，也不是那么容易。我感觉自己已经讲的很详细了，但是不知道读者是否都明白了。

之所以将这么详细，是为后面的文章扫清障碍。所以，想要了解后面文章的内容，首先得把这一篇文章看明白了。祝君好运！

5. 下一步

不知道大家有没有发现一个问题

• 其一，按照咱们日常的使用习惯，这两个按钮放在这里是否合适？
• 其二，要是每增加一个按钮都默认放在后面，那可太不人性化了！

有人可能说：第一节中不是已经讲到了配置菜单的方式了吗？用那个不行吗？——行！就是不好用！

有更好用的方式，咱们下一节介绍。回见！ 另外，本文所使用的代码，可以在下载文件夹中的“demo_indent.html”查看。

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

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

交流QQ群：164999061

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

欢迎关注我的微博。

也欢迎关注我的教程：

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

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

轻量级web富文本框——wangEditor使用手册（2）——扩展一个“缩进”功能