首页 > 代码库 > 轻量级web富文本框——wangEditor使用手册（3）——如何自定义配置菜单 demo
轻量级web富文本框——wangEditor使用手册（3）——如何自定义配置菜单 demo
wangEditor demo menuConfig
欢迎使用wangEditor，请输入内容...
本文的详细配置说明请参见《轻量级web富文本框——wangEditor使用手册（3）——如何自定义配置菜单》，下面粘贴处重要代码：
<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(){ //定义缩进的菜单配置 var indentMenus = { ‘indent‘: { ‘title‘: ‘增加缩进‘, // 标题 ‘type‘: ‘btn‘, // 类型 ‘hotKey‘: ‘ctrl,shift + i‘, // 快捷键 ‘txt‘:‘fa fa-indent‘, // fontAwesome样式 ‘command‘: ‘indent‘, // document.execCommand中要执行的命令名称 ‘callback‘: function(){ // 自定义的callback函数 //alert(‘自定义callback函数‘); } }, ‘outdent‘: { ‘title‘: ‘减少缩进‘, // 标题 ‘type‘: ‘btn‘, // 类型 ‘txt‘:‘fa fa-outdent‘, // fontAwesome样式 ‘command‘: ‘outdent‘, // document.execCommand中要执行的命令名称 ‘callback‘: function(){ // 自定义的callback函数 //alert(‘自定义callback函数‘); } } }; // //一句话，即可把一个div 变为一个富文本框！o(∩_∩)o // var $editor = $(‘#txtDiv‘).wangEditor({ // ‘customMenus‘: indentMenus, // ‘insertBefore‘: { // ‘customMenus‘: indentMenus, // ‘insertBefore‘: { // ‘justifyLeft‘: [‘indent‘, ‘outdent‘, ‘|‘] // } // } // }); // //一句话，即可把一个div 变为一个富文本框！o(∩_∩)o // var $editor = $(‘#txtDiv‘).wangEditor({ // ‘customMenus‘: indentMenus, // ‘insertBefore‘: { // ‘customMenus‘: indentMenus, // ‘insertBefore‘: { // ‘justifyLeft‘: ‘indent‘ // } // } // }); // //一句话，即可把一个div 变为一个富文本框！o(∩_∩)o // var $editor = $(‘#txtDiv‘).wangEditor({ // ‘customMenus‘: indentMenus, // ‘insertBefore‘: { // ‘customMenus‘: indentMenus, // ‘insertBefore‘: { // ‘justifyLeft‘: ‘indent‘, // ‘createLink‘: ‘outdent‘ // } // } // }); // //一句话，即可把一个div 变为一个富文本框！o(∩_∩)o // var $editor = $(‘#txtDiv‘).wangEditor({ // ‘customMenus‘: indentMenus, // ‘after‘: { // ‘justifyLeft‘: ‘indent‘, // ‘createLink‘: ‘outdent‘ // } // }); //一句话，即可把一个div 变为一个富文本框！o(∩_∩)o var $editor = $(‘#txtDiv‘).wangEditor({ ‘customMenus‘: indentMenus, ‘after‘: { ‘orderedList‘: [‘|‘, ‘indent‘, ‘outdent‘] } }); });</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使用手册（3）——如何自定义配置菜单 demo