首页 > 代码库 > 轻量级web富文本框——wangEditor使用手册(2)——扩展一个“缩进”功能

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

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)——扩展一个“缩进”功能