轻量级web富文本框——wangEditor使用手册（5）——配置“插入代码”功能

浏览数：58 / 时间：2015年06月09日

1. 引言

如果一直在看这一系列文章的朋友，应该知道wangEditor的菜单分为三种类型：基本、下拉菜单、弹出框；上一节我们通过一个“设置标题”的例子讲解了wangEditor如何配置一个下拉菜单按钮，这一节我们用一个非常炫酷的功能——插入代码——看看弹出框类型的菜单如何配置。

Are you ready？

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

demo演示 & 全部配置说明：http://www.cnblogs.com/wangfupeng1988/p/4198428.html

交流QQ群：164999061

2. 介绍一下 wangHighLight.js

代码高亮功能是一个比较麻烦的事儿，特别是还要支持多种语言、多种主题风格。所以，我们不在这里再重新造轮子，直接引用一个现有的插件——wangHighLight.js——它不需要任何css样式的引用，支持20多种常用的语言，和多种常用的主题风格。

技术分享

wangHighLight.js 使用教程：https://github.com/wangfupeng1988/wangHighLighter

wangHighLight.js 下载地址：https://github.com/wangfupeng1988/wangHighLighter

wangHighLight.js demo演示：http://www.cnblogs.com/wangfupeng1988/p/4192911.html

本文将使用它来辅助完成“插入代码”的功能。但是注意：wangHighLight.js如何应用，下文中不会过多讲解，所以还需要劳烦大家去看看wangHighLight.js使用教程——很简单的，几行代码，一看就懂——链接：https://github.com/wangfupeng1988/wangHighLighter

3. 加入“插入代码”按钮

通过第二节、第三节、第四节的介绍，如何配置一个菜单、如何加入到菜单栏、如何排序，大家应该都很清楚了。所以，本文就不再去详细的描述这些细节了，描述的太冗长太清楚了看起来反而更麻烦。

3.1 引入 wangHightLight.min.js

想要使用wangHighLight.js来处理代码高亮，当然得先引用它了：

技术分享

3.2 整体代码的结构

技术分享

上图中我们列出了要做“插入代码”功能，所用到的所有代码的整体结构。图中红框标出来的，就是我们下文要重点分析的内容。

注意：第一，这只是一个结构，不是最终的代码；第二，未被红框标出的，但是你又看不明白的，估计你没有看第二节、第三节、第四节；

这虽然是一个代码框架，但是我们运行之后，也能看到一定的效果——菜单栏中增加了一个“插入代码”按钮，点击之后弹出了一个弹出框，看下图：

技术分享

3.3 ‘type‘ : ‘modal‘

‘type‘表示按钮的类型，wangEditor中一共支持三种类型，前两种类型，我们分别在第二节、第四节讲解了，本文的是第三种。如下图：

技术分享

顾名思义，‘type‘ : ‘modal‘——意思就是弹出框类型。但是不同场景下的弹出框，对于大小的要求不一样，因此wangEditor提供了四种大小可供选择：modal-big, modal, modal-small, modal-mini。

3.4 command & hotkey

弹出框类型，不支持快捷键，即不支持hotkey。另外，弹出框的操作一般都比较复杂，不能用简单的command命令完成任务，因此，也不支持command属性。

这两个不支持，你写上也是白写。

3.5 ‘modal‘（重点！）

技术分享

在第四节中，dropMenu类型的菜单配置中，有一个‘dropMenu‘的属性（如果忘记了，可以看看回头看一下）

同理，弹出框类型的菜单配置中，也需要有一个‘modal‘属性，它接收的其实是一个 $(‘div1‘)，一个div元素（如上图）。这个div的内容，将会被wangEditor处理为弹出框，在点击按钮时弹出来（在上文【3.2 整体代码的结构】截图中可以看出来）

但是，上图的代码只是用来演示用的，真实的代码比这个复杂一些。现在我把整个‘modal‘的代码粘贴出来，然后对其中的几个重要的东西做一些解释：

 1 ‘modal‘: (function(){
 2     var langId = wangEditor_getUniqeId(), //wangEditor_getUniqeId() 是wangEditor提供的方法，可以获取一个唯一的id
 3         themeId = wangEditor_getUniqeId(),
 4         codeId = wangEditor_getUniqeId(),
 5         btnId = wangEditor_getUniqeId(),
 6 
 7         //定义modal
 8         $modal = $(
 9             ‘<div>‘ +
10             ‘    语言：<select id="‘ + langId + ‘"></select> &nbsp;&nbsp;‘ +
11             ‘    主题：<select id="‘ + themeId + ‘"></select>‘ +
12             ‘    <textarea id="‘ + codeId + ‘" style="width:100%; height:150px;"></textarea>‘ + 
13             ‘    <button id="‘ + btnId + ‘">插入</button>‘ +
14             ‘</div>‘
15         ),
16 
17         //定义callback
18         callback = function(){
19             $modal.find(‘textarea‘).val(‘‘);
20         };
21 
22     //因为下文要对语言、主题的下拉框进行绑定，所以要先将 $modal 附加到页面上，否则无法获取select节点。
23     $(‘body‘).append($modal);
24         
25     var    $langSlt = $(‘#‘ + langId),  //获取各个dom
26         $themeSlt = $(‘#‘ + themeId),
27         $codeTxt = $(‘#‘ + codeId),
28         $btn = $(‘#‘ + btnId),
29 
30         //获取语言、主题的数组
31         langArray = wangHighLighter.getLangArray(),
32         themeArray = wangHighLighter.getThemeArray();
33 
34     //绑定语言
35     $.each(langArray, function(key, value){
36         $langSlt.append($(‘<option>‘ + value + ‘</option>‘));
37     });
38     //绑定主题
39     $.each(themeArray, function(key, value){
40         $themeSlt.append($(‘<option>‘ + value + ‘</option>‘));
41     });
42 
43     //版定“插入”按钮点击事件
44     $btn.click(function(e){
45         var lang = $langSlt.val(),
46             theme = $themeSlt.val(),
47             code = $codeTxt.val(),
48             result;
49         //高亮代码
50         result = wangHighLighter.highLight(lang, theme, code);
51         //插入代码
52         wangeditor_commonCommand(e, ‘insertHTML‘, result, callback);  
53         //（wangeditor_commonCommand(e, commandName, commandValue, callback)是wangEditor提供的命令）
54     });
55 
56     //返回 $modal
57     return $modal;
58 })()