轻量级web富文本框——wangEditor使用手册（3）——如何自定义配置菜单 demo

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

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="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>