自定义菜单

可通过修改 editor.config.menus 来自定义编辑器的菜单的显示/隐藏、排序、分组。注意,该操作必须在 editor.create() 方法之前。


<div id="div1">
    <p>请输入内容...</p>
</div>


<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
    var editor = new wangEditor("div1");
    
    // 普通的自定义菜单
    editor.config.menus = [
        "source",
        "|",     // "|" 是菜单组的分割线
        "bold",
        "underline",
        "italic",
        "strikethrough",
        "eraser",
        "forecolor",
        "bgcolor"
     ];
     
     // 仅仅想移除某几个菜单,例如想移除『插入代码』和『全屏』菜单:
     // 其中的 wangEditor.config.menus 可获取默认情况下的菜单配置
     // editor.config.menus = $.map(wangEditor.config.menus, function(item, key) {
     //     if (item === "insertcode") {
     //         return null;
     //     }
     //     if (item === "fullscreen") {
     //         return null;
     //     }
     //     return item;
     // });
    
    editor.create();
</script>

另外,wangEditor默认的菜单配置,可在下载下来的wangEditor.js文件中搜索E.config.menus关键字来找到。

目前的默认菜单配置如下,以在最新代码中搜索出来的结果为准

    [
        "source",
        "|",
        "bold",
        "underline",
        "italic",
        "strikethrough",
        "eraser",
        "forecolor",
        "bgcolor",
        "|",
        "quote",
        "fontfamily",
        "fontsize",
        "head",
        "unorderlist",
        "orderlist",
        "alignleft",
        "aligncenter",
        "alignright",
        "|",
        "link",
        "unlink",
        "table",
        "emotion",
        "|",
        "img",
        "video",
        "location",
        "insertcode",
        "|",
        "undo",
        "redo",
        "fullscreen"
    ];

如果需要『行高』和『缩进』菜单,可直接使用lineheightindent这两个菜单id。因为wangEditor中已经集成了这两个自定义菜单的代码。

文章导航