首页 > 代码库 > 轻量级web富文本框——wangEditor使用手册（5）——配置“插入代码”功能 demo
轻量级web富文本框——wangEditor使用手册（5）——配置“插入代码”功能 demo
wangEditor demo insertCode
欢迎使用wangEditor，请输入内容...
本文的详细配置说明可参见《轻量级web富文本框——wangEditor使用手册（5）——配置“插入代码”功能》，下文只粘贴出重要代码：
<link rel="stylesheet" type="text/css" href="fontawesome-4.2.0/css/font-awesome.min.css"><!--[if IE]><link rel="stylesheet" type="text/css" href="http://www.mamicode.com/fontawesome-4.2.0/css/font-awesome-ie7.min.css"><![endif]--><link rel="stylesheet" type="text/css" href="css/wangEditor-1.1.0-min.css"><script src="js/jquery-1.10.2.min.js" type="text/javascript"></script><script type="text/javascript" src=‘js/wangEditor-1.1.0-min.js‘></script>
<div id=‘txtDiv‘ style=‘border:1px solid #cccccc; height:240px;‘> <p>欢迎使用<b>wangEditor</b>，请输入内容...</p></div><script type="text/javascript"> $(function(){ //要先引入 wangHighLighter-min.js,下载地址：https://github.com/wangfupeng1988/wangHighLighter var customMenus = { ‘insertCode‘:{ ‘title‘: ‘插入代码‘, ‘type‘: ‘modal‘, // ‘modal-big‘ / ‘modal‘ / ‘modal-small‘ / ‘modal-mini‘ // type === modal 时，没有 ‘command‘ 和 ‘hotkey‘ ‘txt‘: ‘fa fa-code‘, ‘modal‘: (function(){ var langId = wangEditor_getUniqeId(), //wangEditor_getUniqeId() 是wangEditor提供的方法，可以获取一个唯一的id themeId = wangEditor_getUniqeId(), codeId = wangEditor_getUniqeId(), btnId = wangEditor_getUniqeId(), //定义modal $modal = $( ‘<div>‘ + ‘ 语言：<select id="‘ + langId + ‘"></select> ‘ + ‘ 主题：<select id="‘ + themeId + ‘"></select>‘ + ‘ <textarea id="‘ + codeId + ‘" style="width:100%; height:150px;"></textarea>‘ + ‘ <button id="‘ + btnId + ‘">插入</button>‘ + ‘</div>‘ ), //定义callback callback = function(){ $modal.find(‘textarea‘).val(‘‘); }; //因为下文要对语言、主题的下拉框进行绑定，所以要先将 $modal 附加到页面上，否则无法获取select节点。 $(‘body‘).append($modal); var $langSlt = $(‘#‘ + langId), //获取各个dom $themeSlt = $(‘#‘ + themeId), $codeTxt = $(‘#‘ + codeId), $btn = $(‘#‘ + btnId), //获取语言、主题的数组 langArray = wangHighLighter.getLangArray(), themeArray = wangHighLighter.getThemeArray(); //绑定语言 $.each(langArray, function(key, value){ $langSlt.append($(‘<option>‘ + value + ‘</option>‘)); }); //绑定主题 $.each(themeArray, function(key, value){ $themeSlt.append($(‘<option>‘ + value + ‘</option>‘)); }); //版定“插入”按钮点击事件 $btn.click(function(e){ var lang = $langSlt.val(), theme = $themeSlt.val(), code = $codeTxt.val(), result; //高亮代码 result = wangHighLighter.highLight(lang, theme, code); //插入代码 wangeditor_commonCommand(e, ‘insertHTML‘, result, callback); //（wangeditor_commonCommand(e, commandName, commandValue, callback)是wangEditor提供的命令） }); //返回 $modal return $modal; })() } }; //一句话，即可把一个div 变为一个富文本框！o(∩_∩)o var $editor = $(‘#txtDiv‘).wangEditor({ ‘customMenus‘: customMenus, ‘after‘: { ‘webImage‘: ‘insertCode‘ } }); });</script>
注意：上面demo中，“背景色”的按钮图标没有显示出来
，这是我因为引用的fontAwesome字体库版本过低，因为博客园不允许上传字体库文件，所以只好引用cdn了。但是大家下载下来运行，是不会出现这种情况的。特此说明。
-------------------------------------------------------------------------------------------------------------
下载地址：https://github.com/wangfupeng1988/wangEditor
demo演示 & 全部配置说明：http://www.cnblogs.com/wangfupeng1988/p/4198428.html
交流QQ群：164999061
-------------------------------------------------------------------------------------------------------------
欢迎关注我的微博。
也欢迎关注我的教程：
《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》
-------------------------------------------------------------------------------------------------------------
轻量级web富文本框——wangEditor使用手册（5）——配置“插入代码”功能 demo
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。