首页 > 代码库 > 轻量级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> ‘ +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 })()
3.5.1 wangEditor_getUniqeId() 方法
wangEditor_getUniqeId() 是wangEditor提供的一个方法,可以获取一个唯一的不重复的id。而且,每次执行该函数,都会获取一个不同的id。
3.5.2 wangeditor_commonCommand() 方法
wangeditor_commonCommand(e, commandName, commandValue, callback) 函数是wangEditor暴露出来的执行命令的函数,所有命令都可以使用它来执行。
参数的解释:
- e - javascript事件参数(可选),如果是javascript事件触发的命令操作,一定要把e传入进来;
- commandName - document.execCommand的第一个参数(必须);
- commandValue - document.execCommand的第三个参数(可选);
- 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)——配置“插入代码”功能