轻量级web富文本框——wangEditor使用手册（4）——配置下拉菜单 demo

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

wangEditor demo head

欢迎使用wangEditor，请输入内容...

本文的详细配置说明请参见《轻量级web富文本框——wangEditor使用手册（4）——配置下拉菜单》，下面只列出重要的代码：

<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 customMenus = {
            ‘head‘: {
                ‘title‘: ‘设置标题‘,                // 标题
                ‘type‘: ‘dropMenu‘,                 // 类型 btn / dropMenu / modal
                // dropMenu 类型不支持快捷键
                ‘txt‘:‘fa fa-flag-o‘,               // fontAwesome样式
                ‘command‘: ‘formatBlock ‘,          // document.execCommand中要执行的命令名称
                ‘dropMenu‘: (function(){            // dropMenu类型的菜单，要有一个‘dropMenu‘方法，返回下拉菜单dom节点
                    var html =     ‘<ul>‘ + 
                                ‘    <li><a href="#" commandValue="<h1>"><h1>标题1</h1></a></li>‘ + 
                                ‘    <li><a href="#" commandValue="<h2>"><h2>标题2</h2></a></li>‘ + 
                                ‘    <li><a href="#" commandValue="<h3>"><h3>标题3</h3></a></li>‘ + 
                                ‘    <li><a href="#" commandValue="<h4>"><h4>标题4</h4></a></li>‘ + 
                                ‘    <li><a href="#" commandValue="<p>">正文</a></li>‘ + 
                                ‘</ul>‘;
                    return $(html);
                })(),
                ‘callback‘: function(){             // 自定义的callback函数
                    //alert(‘自定义callback函数‘);
                }
            }
        };
        
        //一句话，即可把一个div 变为一个富文本框！o(∩_∩)o 
        var $editor = $(‘#txtDiv‘).wangEditor({
            ‘customMenus‘: customMenus,
            ‘insertBefore‘: {
                ‘foreColor‘: ‘head‘
            }
        });
    });
</script>