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

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

2024-10-21 08:50:39   232人阅读

wangEditor demo head

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

<script type="text/javascript">// ‘ + ‘
  • ">

    标题1

    • ‘ + ‘
  • ">

    标题2

    • ‘ + ‘
  • ">

    标题3

    • ‘ + ‘
  • ">

    标题4

    • ‘ + ‘
  • ">正文
    • ‘ + ‘‘; return $(html); })(), ‘callback‘: function(){ // 自定义的callback函数 //alert(‘自定义callback函数‘); } } }; //一句话，即可把一个div 变为一个富文本框！o(∩_∩)o var $editor = $(‘#txtDiv‘).wangEditor({ ‘customMenus‘: customMenus, ‘insertBefore‘: { ‘foreColor‘: ‘head‘ } }); });// ]]></script>

    本文的详细配置说明请参见《轻量级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="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 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="http://www.mamicode.com/#" commandValue="http://www.mamicode.com/
    "><h1>标题1</h1></a></li>‘ +                                 ‘    <li><a href="http://www.mamicode.com/#" commandValue="http://www.mamicode.com/
    "><h2>标题2</h2></a></li>‘ +                                 ‘    <li><a href="http://www.mamicode.com/#" commandValue="http://www.mamicode.com/
    "><h3>标题3</h3></a></li>‘ +                                 ‘    <li><a href="http://www.mamicode.com/#" commandValue="http://www.mamicode.com/
    "><h4>标题4</h4></a></li>‘ +                                 ‘    <li><a href="http://www.mamicode.com/#" commandValue="http://www.mamicode.com/
    ">正文</a></li>‘ +                                 ‘</ul>‘;                    return $(html);                })(),                ‘callback‘: function(){             // 自定义的callback函数                    //alert(‘自定义callback函数‘);                }            }        };                //一句话，即可把一个div 变为一个富文本框！o(∩_∩)o         var $editor = $(‘#txtDiv‘).wangEditor({            ‘customMenus‘: customMenus,            ‘insertBefore‘: {                ‘foreColor‘: ‘head‘            }        });    });</script>

    注意：上面demo中，“背景色”的按钮图标没有显示出来技术分享，这是我因为引用的fontAwesome字体库版本过低，因为博客园不允许上传字体库文件，所以只好引用cdn了。但是大家下载下来运行，是不会出现这种情况的。特此说明。

    另外，博客园自定义了标题的样式，因此会显示下图的模样。当你下载并自己使用wangEditor时，也可以自定义标题样式，无论如何定义，都符合“所见即所得”。

    技术分享

    -------------------------------------------------------------------------------------------------------------

    下载地址：https://github.com/wangfupeng1988/wangEditor

    demo演示 & 全部配置说明：http://www.cnblogs.com/wangfupeng1988/p/4198428.html

    交流QQ群：164999061

    -------------------------------------------------------------------------------------------------------------

    欢迎关注我的微博。

    也欢迎关注我的教程：

    《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》

    -------------------------------------------------------------------------------------------------------------

     

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


    联系
    我们