首页 > 代码库 > 轻量级web富文本框——wangEditor使用手册(5)——配置“插入代码”功能

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

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         //定义callback18         callback = function(){19             $modal.find(‘textarea‘).val(‘‘);20         };21 22     //因为下文要对语言、主题的下拉框进行绑定,所以要先将 $modal 附加到页面上,否则无法获取select节点。23     $(‘body‘).append($modal);24         25     var    $langSlt = $(‘#‘ + langId),  //获取各个dom26         $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     //返回 $modal57     return $modal;58 })()
‘modal‘的所有代码

3.5.1 wangEditor_getUniqeId() 方法

wangEditor_getUniqeId() 是wangEditor提供的一个方法,可以获取一个唯一的不重复的id。而且,每次执行该函数,都会获取一个不同的id。

3.5.2 wangeditor_commonCommand() 方法

wangeditor_commonCommand(e, commandName, commandValue, callback) 函数是wangEditor暴露出来的执行命令的函数,所有命令都可以使用它来执行。

参数的解释:

  1. e - javascript事件参数(可选),如果是javascript事件触发的命令操作,一定要把e传入进来;
  2. commandName - document.execCommand的第一个参数(必须);
  3. commandValue - document.execCommand的第三个参数(可选);
  4. callback - 传入的自定义函数,命令执行完之后,执行(可选);

下面列出了几个使用的示例:

技术分享

3.6 运行

一些代码准备就绪之后,运行网页,查看效果:

技术分享

4. 总结

在wangEditor刚开始做,还依赖于bootstrap的时候,其中一个亮点就是“插入代码”。但是后来重构之后,就一直没有来得及加上这个功能。今天终于算是了结了。

另外,本文所用到的代码,可以从下载内容的 demo_insertcode.html 中获取。本文的demo演示:http://www.cnblogs.com/wangfupeng1988/p/4198513.html

接下来,我将把uploadify控件来过来,在wangEditor中实现上传文件、上传图片的功能。耐心等待!

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

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

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

交流QQ群:164999061

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

欢迎关注我的微博。

也欢迎关注我的教程:

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

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

 

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