Ueditor富文本编辑器客制化功能添加

---

ueditor简介

ueditor是百度开发的开源的富文本编辑器, 支持类似域Excel的表格操作

主要配置文件

文件名称	文件内容分
ueditor.all.js	源码主文件
ueditor.config.js	配置文件, 配置属性白名单
zh-cn.js,en.js	多语言文件
ueditor.css	样式信息

要实现的功能展示

可以设置单元格的属性, 比如有数字,字符, 百分比等等.
右键,添加单元格属性

可以选择对应的属性,

确认后可以查看属性

实现过程

首先添加上菜单

修改 ueditor.all.js

在 dialogBtns里面维护好对应的操作

添加到右键菜单, 找到右键菜单代码

一个菜单选项如下

菜单组如下, 里面包含了子菜单

找到自己想要放的位置, 加上设置单元格属性的菜单
这里点击我们会打开一个窗口, 没有这个需求就可以直接调用 command, command维护后面会讲到

                //单元格类型
                {
                    label:lang.setcellattribute,
                    cmdName:'setcellattribute',
                    exec:function () {
                        if ( UE.ui['setcellattribute'] ) {
                            new UE.ui['setcellattribute']( this );
                        }
                        this.getDialog('setcellattribute').open();
                    }
                },

组件添加上要事件, 在其他组件添加事件代码的区域

    /**设置数据类型**/
    UE.plugins['setcellattribute'] = function () {
        UE.commands['template'] = {
            execCommand:function (cmd, obj) {
                obj.html && this.execCommand("inserthtml", obj.html);
            }
        };
        this.addListener("click", function (type, evt) {
            var el = evt.target || evt.srcElement,
                range = this.selection.getRange();
            var tnode = domUtils.findParent(el, function (node) {
                if (node.className && domUtils.hasClass(node, "ue_t")) {
                    return node;
                }
            }, true);
            tnode && range.selectNode(tnode).shrinkBoundary().select();
        });
        this.addListener("keydown", function (type, evt) {
            var range = this.selection.getRange();
            if (!range.collapsed) {
                if (!evt.ctrlKey && !evt.metaKey && !evt.shiftKey && !evt.altKey) {
                    var tnode = domUtils.findParent(range.startContainer, function (node) {
                        if (node.className && domUtils.hasClass(node, "ue_t")) {
                            return node;
                        }
                    }, true);
                    if (tnode) {
                        domUtils.removeClasses(tnode, ["ue_t"]);
                    }
                }
            }
        });
    };

设置打开的窗口的页面,在iframeUrlMap添加信息

添加信息如下

            'setcellattribute':'~/plugin/ueditor/dialogs/table/setcellattribute.html',

这个时候打开窗口就会显示 setcellattribute.html 页面, 在页面点击确定调用了一个命令

command区域维护一下这个command

        //数据类型
        UE.commands['setcellattribute'] = {
            queryCommandState: function () {
                return getTableItemsByRange(this).table ? 0 : -1
            },
            execCommand: function (cmd,dataTypeCode) {
                var me = this,
                    ut = getUETableBySelected(me);
                if (!ut) {
                    var start = me.selection.getStart(),
                        cell = start && domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
                    if (cell) {
                        var row = cell.parentElement;
                        //单元格是表头特殊处理
                        if (domUtils.hasClass(row, "firstRow")) {
                            HandTableHeadCellAttribute(cell,dataTypeCode);

                        } else {
                            SetCellAttribute(cell,dataTypeCode);
                        }
                    }
                } else {
                    utils.each(ut.selectedTds, function (cell) {
                        var row = cell.parentElement;
                        //单元格是表头特殊处理
                        if (domUtils.hasClass(row, "firstRow")) {
                            HandTableHeadCellAttribute(cell,dataTypeCode);
                        } else {
                            SetCellAttribute(cell,dataTypeCode);
                        }
                    });
                }
            }
        };

上面调用function的如下, 这里面处理的cell的 cellattribute属性, 之后要在 ueditor.config.js 配置属性白名单

        function HandTableHeadCellAttribute (node, cellattribute) {
            var nodeId = $(node).attr("id");

            //全局表搜索列
            var row = node.parentElement;
            var table = row.parentElement;

            //遍历行
            $.each(table.rows, function (k, v) {
                //拼接ID
                var cellId = "";
                if (k === 0) {
                    cellId = nodeId;
                } else {
                    cellId = nodeId + k;
                }
                //取出所需的值

                var cell = UE.dom.domUtils.filterNodeList(v.cells, function (node) {
                    if ($(node).attr("id") &&
                        $(node).attr("id") === cellId) {
                        return true;
                    }
                    return false;
                });

                if (cell &&
                    $(cell).attr("dimtype") !== "CD" &&
                    $(cell).attr("dimtype") !== "RD") {
                    SetCellAttribute(cell,cellattribute);
                }
            });
        }

        function SetCellAttribute(cell,cellattribute) {
            //设置数据类
            cell.setAttribute("cellattribute", cellattribute);

            if(cellattribute === 'date') {
                //日期类型设置日历控件
                cell.setAttribute("datepicker", "Y");
            } else {
                domUtils.removeAttributes(cell,'datepicker');
            }

            //百分比类型,设置百分比显示
            if(cellattribute === 'percentage') {
                cell.setAttribute("isshowpercent",'Y');
            } else {
                domUtils.removeAttributes(cell,'isshowpercent');
            }


        }

配置页面的内容-setcellattribute.html

包含了页面初始化渲染的处理逻辑, 还有点击确定处理逻辑

<#include "../../../../include/header.html">
<body>
<script>
    var viewModel = kendo.observable({
        data: {},
        confirm : function () {
        },
        clearAll : function () {
            viewModel.data.set("cellAttribute", null);
        }
    });
    var dateTypeSource = [
        {
            meaning: "数字",
            value: "number"
        }, {
            meaning: "字符",
            value: "string"
        }, {
            meaning: "日期",
            value: "date"
        },{
            meaning:'百分比',
            value : 'percentage'
        }
    ];
</script>
<div id="page_content">
    <span id="echo_info" class="pull-left" style="color:#F00"></span>
    <div id="queryPanel" style="margin-right:5px;padding-bottom:10px; padding-top: 20px; text-align: center;">
        <div id="form">
            <input type="text" id="cellAttribute" data-bind="value: data.cellAttribute"/>
            <script>
                $("#cellAttribute").kendoComboBox({
                    dataTextField: "meaning",
                    dataValueField: "value",
                    dataSource: dateTypeSource
                }).data("kendoComboBox");
            </script>
        </div>
        <script>kendo.bind($('#form'),viewModel);</script>
    </div>
</div>
<script type="text/javascript" src="${base.contextPath}/lib/ueditor/dialogs/internal.js"></script>
<script type="text/javascript">
    window.isArea;
    var isArea = createArea(editor);

    echoCellAttribute(isArea);

    /**
     * echoCellAttribute : 显示数据类型
     *
     * @author yanqiang.jiang@hand-china.com
     * @date   2019/02/20 15:39
     * @param isArea
     * @return
     * @since JDK 1.8
     */
    function echoCellAttribute(isArea) {
        var id;
        var cellattribute = '';
        if ($.isEmpty(isArea)) {
            var start = editor.selection.getStart();
            var node = UE.dom.domUtils.findParentByTagName(start, ["td", "th"], true);
            id = $(node).attr("id");
            cellattribute = $(node).attr("cellattribute");
        } else {
            id = isArea.split(":")[0];
            var cellattribute =$(editor.getContent()).find("#"+id).attr("cellattribute");
        }
        viewModel.data.set("cellAttribute", cellattribute);
    }

    dialog.onok = function () {
        var groupCode = parent.ue.groupCode;
        var formCode = parent.ue.form_code;

        var cellAttribute = $("#cellAttribute").val();

        if ($.isEmpty(isArea)) {
            //若用户没选择区域，则用户有可能要选择表项
            var start = editor.selection.getStart();
            try {
                var node = UE.dom.domUtils.findParentByTagName(start, ["td", "th"], true);
                setCellAttributeListToMap(node, groupCode, formCode, cellAttribute);
            } catch (e) {
                console.log('warn:' + '此表单未选择表项或表项区域!');
            }
        } else {
            //用户选择的是区域,先虚拟出该区域的所有位置标识
            var selectedArea = getSelectArea(isArea);
            $.each(selectedArea, function (k, v) {
                var node = $(editor.getContent()).find("#"+v)[0];
                setCellAttributeListToMap(node, groupCode, formCode, cellAttribute);
            });
        }

        editor.execCommand('setcellattribute',cellAttribute);
    };


    /**
     *
     *处理用于所选区域, 如果是表头则是整个区域
     *
     **/
    function setCellAttributeListToMap(node, groupCode, formCode, cellAttribute) {

        //判断n是不是第一行
        var row = node.parentElement;
        if (domUtils.hasClass(row, "firstRow")) {

            var nodeId = $(node).attr("id");

            //全局表搜索列
            var table = row.parentElement;

            //遍历行
            $.each(table.rows, function (k, v) {
                //拼接ID
                var cellId= "";
                if(k === 0){
                    cellId = nodeId;
                } else {
                    cellId =  nodeId + k;
                }
                //取出所需的值

                var cell =  $(editor.getContent()).find("#"+cellId)[0];
                if(cell&&
                $(cell).attr("dimtype") !== "CD" &&
                $(cell).attr("dimtype") !== "RD"){
                    setCellAttributeToMap(cell, groupCode, formCode, cellAttribute);
                }
            });
        } else {
            setCellAttributeToMap(node, groupCode, formCode, cellAttribute);
        }

    }

    function setCellAttributeToMap(cell, groupCode, formCode, cellAttribute) {
        var tabCode = $(cell).attr("tablecode");
        var locCode = $(cell).attr("id");
        var key = groupCode + "_" + formCode + "_" + tabCode + "_" + locCode;
        var value = cellAttribute;
        if(parent.ue.cellAttributeMap) {
            parent.ue.cellAttributeMap.set(key, value);
        }
    }

    /**
     * 获取用户所选区域 例如 A1:B3
     * @param ue ueditor对象
     * @returns {string}
     */
    function createArea(ue) {
        var area = '';
        var html = ue.getContent();
        //将html字符串转化成jquery对象
        var htmlObj = $(html);
        //获取所有的td对象
        var tds = htmlObj.find("td.selectTdClass");
        if(!$.isEmpty(tds) && tds.length > 0){
            var minid = tds[0].id;
            var maxid = tds[tds.length-1].id;
            area = minid + ':' + maxid;
        }
        return area;
    }

</script>
</body>
</html>

添加多语言配置

zh-cn.js 和en.js维护上中文和英文
在labelMap添加

内容

在contextMenu添加

内容

最后添加菜单对象, 这李是一个简单的菜单, static为空即可, 添加到页面上 UE.I18N[‘zh-cn’] 的后面

    'setcellattribute':{
        'static' :{

        }
    },

修改英文类似操作

添加CSS样式–ueditor.css

打开 ueditor.css
在配置 .edui-icon 的CSS的地方添加

.edui-default  .edui-for-setcellattribute .edui-icon {
    background-position: -700px -40px;
}

在配置 .edui-dialog-content 的CSS的地方添加如下

/*数据类型*/
.edui-default .edui-for-setcellattribute .edui-dialog-content {
    width: 240px;
    height: 150px;
}

开放属性白名单–ueditor.config.js

之前在 ueditor.all.js 配置 command的时候使用了cell的 cellattribute 属性现在添加上白名单
修改 ueditor.config.js
在withList找到 td

在td里面添加 cellattribute即可