『缩进』菜单

前言

• 把扩展菜单的js文件写在一个独立的文件中，命名为custom-menu.js，这个文件最终要引用到页面中。
• 将要扩展的『缩进』菜单的id命名为 indent 。菜单id不能已有的菜单的id重复，现有菜单的id，可参见『参数配置 - 自定义菜单』

页面

假设现在custom-menu.js已经编写完成（下文将描述该文件如何编写），要引用到页面中。而且页面中还有对editor.config.menus配置以显示刚刚扩展的菜单，详情可参见『参数配置 - 自定义菜单』。例如：

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

<script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../dist/js/wangEditor.min.js"></script>

<!--注意：custom-menu.js一定要在wangEditor.min.js引用之后再引用-->
<script type="text/javascript" src="./js/custom-menu.js"></script>
<script type="text/javascript">
    var editor = new wangEditor("div1");
    
    editor.config.menus = [
        "source",
        "|",
        "bold",
        // 通过自定义菜单，让新配置的菜单显示在页面中。
        // 上文已经确定，新配置的『缩进』菜单id为 "indent"
        "indent"
    ];
    
    editor.create();
</script>

编写 custom-menu.js

可直接查看源代码，里面有详细的注释描述

(function () {

    // 获取 wangEditor 构造函数和 jquery
    var E = window.wangEditor;
    var $ = window.jQuery;

    // 用 createMenu 方法创建菜单
    E.createMenu(function (check) {

        // 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
        var menuId = "indent";

        // check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
        if (!check(menuId)) {
            return;
        }

        // this 指向 editor 对象自身
        var editor = this;

        // 创建 menu 对象
        var menu = new E.Menu({
            editor: editor,  // 编辑器对象
            id: menuId,  // 菜单id
            title: "缩进", // 菜单标题

            // 正常状态和选中状态下的dom对象，样式需要自定义
            $domNormal: $("<a href="#" tabindex="-1"><i class="wangeditor-menu-img-indent-left"></i></a>"),
            $domSelected: $("<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-indent-left"></i></a>")
        });

        // 菜单正常状态下，点击将触发该事件
        menu.clickEvent = function (e) {
            // 找到当前选区所在的 p 元素
            var elem = editor.getRangeElem();
            var p = editor.getSelfOrParentByName(elem, "p");
            var $p;

            if (!p) {
                // 未找到 p 元素，则忽略
                return e.preventDefault();
            }
            $p = $(p);

            // 使用自定义命令
            function commandFn() {
                $p.css("text-indent", "2em");
            }
            editor.customCommand(e, commandFn);
        };

        // 菜单选中状态下，点击将触发该事件
        menu.clickEventSelected = function (e) {
            // 找到当前选区所在的 p 元素
            var elem = editor.getRangeElem();
            var p = editor.getSelfOrParentByName(elem, "p");
            var $p;

            if (!p) {
                // 未找到 p 元素，则忽略
                return e.preventDefault();
            }
            $p = $(p);

            // 使用自定义命令
            function commandFn() {
                $p.css("text-indent", "0");
            }
            editor.customCommand(e, commandFn);
        };

        // 根据当前选区，自定义更新菜单的选中状态或者正常状态
        menu.updateSelectedEvent = function () {
            // 获取当前选区所在的父元素
            var elem = editor.getRangeElem();
            var p = editor.getSelfOrParentByName(elem, "p");
            var $p;
            var indent;

            if (!p) {
                // 未找到 p 元素，则标记为未处于选中状态
                return false;
            }
            $p = $(p);
            indent = $p.css("text-indent");

            if (!indent || indent === "0px") {
                // 得到的p，text-indent 属性是 0，则标记为未处于选中状态
                return false;
            }

            // 找到 p 元素，并且 text-indent 不是 0，则标记为选中状态
            return true;
        };

        // 增加到editor对象中
        editor.menus[menuId] = menu;
    });

})();

最终效果

最终运行页面的效果如下：