自定义UEditor右键菜单

2022-12-15 11:40:17 浏览数 (1)

代码语言:javascript复制
//打开右键菜单功能 
       ,enableContextMenu: true
//右键菜单的内容,label留空支持国际化,否则以此配置为准
//,contextMenu:[
//    {
//        label:'',       //显示的名称
//        cmdName:'selectall',//执行的command命令,当点击这个右键菜单时
//        //exec可选,有了exec就会在点击时执行这个function,优先级高于cmdName
//        exec:function () {
//            //this是当前编辑器的实例
//            //this.ui._dialogs['inserttableDialog'].open();
//        }
//    }
//]
        ,contextMenu: [
        {label: '全选',cmdName: 'selectall'},
        {
            label: '清空文档',
            cmdName: 'cleardoc',
            exec: function() {
                if ( confirm('确定清空当前文档么?') ) {
                    this.execCommand('cleardoc');
                }
            }
        },
        '-',
        {
            group: '段落样式',
            icon: 'justifyjustify',
            subMenu: [{
                label: '',
                cmdName: 'justify',
                value: 'left'
            }, {
                label: '',
                cmdName: 'justify',
                value: 'right'
            }, {
                label: '',
                cmdName: 'justify',
                value: 'center'
            }, {
                label: '',
                cmdName: 'justify',
                value: 'justify'
            }]
        },
        '-',
        {
            group: '表格',
            icon: 'table',
            subMenu: [{
                    label: '插入表格',
                    cmdName: 'inserttable'
                },
                {
                    label: '删除表格',
                    cmdName: 'deletetable'
                },
                '-',
                {
                    label: '删除行',
                    cmdName: 'deleterow'
                },
                {
                    label: '删除列',
                    cmdName: 'deletecol'
                },
                {
                    label: '左插入列',
                    cmdName: 'insertcol'
                },
                {
                    label: '右插入列',
                    cmdName: 'insertcolnext'
                },
                {
                    label: '前插入行',
                    cmdName: 'insertrow'
                },
                {
                    label: '后插入行',
                    cmdName: 'insertrownext'
                },
                '-',
                {
                    label: '插入表格名称',
                    cmdName: 'insertcaption'
                },
                {
                    label: '删除表格名称',
                    cmdName: 'deletecaption'
                },
                {
                    label: '插入标题行',
                    cmdName: 'inserttitle'
                },
                {
                    label: '删除标题行',
                    cmdName: 'deletetitle'
                },
                {
                    label: '插入标题列',
                    cmdName: 'inserttitlecol'
                },
                {
                    label: '删除标题列',
                    cmdName: 'deletetitlecol'
                },
                '-',
                {
                    label: '合并单元格',
                    cmdName: 'mergecells'
                },
                {
                    label: '向右合并',
                    cmdName: 'mergeright'
                },
                {
                    label: '向下合并',
                    cmdName: 'mergedown'
                },
                '-',
                {
                    label: '拆分行',
                    cmdName: 'splittorows'
                },
                {
                    label: '拆分列',
                    cmdName: 'splittocols'
                },
                {
                    label: '拆分单元格',
                    cmdName: 'splittocells'
                },
                '-',
                {
                    label: '平均分配行',
                    cmdName: 'averagedistributerow'
                },
                {
                    label: '平均分配列',
                    cmdName: 'averagedistributecol'
                },
                '-',
                {
                    label: '单元格属性',
                    cmdName: 'edittd',
                    exec: function() {
                        if (UE.ui['edittd']) {
                            new UE.ui['edittd'](this);
                        }
                        this.getDialog('edittd').open();
                    }
                },
                {
                    label: '表格属性',
                    cmdName: 'edittable',
                    exec: function() {
                        if (UE.ui['edittable']) {
                            new UE.ui['edittable'](this);
                        }
                        this.getDialog('edittable').open();
                    }
                },
                {
                    label: '设置边框可见',
                    cmdName: 'setbordervisible'
                }
            ]
        },
        '-',
        {
            group: '表格排序',
            icon: 'tablesort',
            subMenu: [
                {
                    label:"开启表格排序",
                    cmdName: 'enablesort'
                },
                {
                    label:"关闭表格排序",
                    cmdName: 'disablesort'
                },
                {
                    label:"排序逆转",
                    cmdName: 'sorttable',
                    value: 'reversecurrent'
                },
                {
                    label:"ASCII升序",
                    cmdName: 'sorttable',
                    value: 'orderbyasc'
                },
                {
                    label:"ASCII降序",
                    cmdName: 'sorttable',
                    value: 'reversebyasc'
                },
                {
                    label:"数值升序",
                    cmdName: 'sorttable',
                    value: 'orderbynum'
                },
                {
                    label:"数值降序",
                    cmdName: 'sorttable',
                    value: 'reversebynum'
                }
            ]
        },
        '-',
        {
            group: '边框底纹',
            icon: 'borderBack',
            subMenu: [
                {
                    label:"隔行着色",
                    cmdName: "interlacetable",
                    exec: function() {
                        this.execCommand("interlacetable");
                    }
                },
                {
                    label:"取消隔行着色",
                    cmdName: "uninterlacetable",
                    exec: function() {
                        this.execCommand("uninterlacetable");
                    }
                },
                {
                    label:"选取背景隔行",
                    cmdName: "settablebackground",
                    exec: function() {
                        this.execCommand("settablebackground", {
                            repeat: true,
                            colorList: ["#bbb", "#ccc"]
                        });
                    }
                },
                {
                    label:"取消选取背景",
                    cmdName: "cleartablebackground",
                    exec: function() {
                        this.execCommand("cleartablebackground");
                    }
                },
                {
                    label:"红蓝相间",
                    cmdName: "settablebackground",
                    exec: function() {
                        this.execCommand("settablebackground", {
                            repeat: true,
                            colorList: ["red", "blue"]
                        });
                    }
                },
                {
                    label:"三色渐变",
                    cmdName: "settablebackground",
                    exec: function() {
                                this.execCommand("settablebackground", {
                            repeat: true,
                            colorList: ["#aaa", "#bbb", "#ccc"]
                        });
                    }
                }
            ]
        },
        '-',
        {
            group: '单元格对齐方式',
            icon: 'aligntd',
            subMenu: [
                {
                    cmdName: 'cellalignment',
                    value: {
                        align: 'left',
                        vAlign: 'top'
                    }
                },
                {
                    cmdName: 'cellalignment',
                    value: {
                        align: 'center',
                        vAlign: 'top'
                    }
                },
                {
                    cmdName: 'cellalignment',
                    value: {
                        align: 'right',
                        vAlign: 'top'
                    }
                },
                {
                    cmdName: 'cellalignment',
                    value: {
                        align: 'left',
                        vAlign: 'middle'
                    }
                },
                {
                    cmdName: 'cellalignment',
                    value: {
                        align: 'center',
                        vAlign: 'middle'
                    }
                },
                {
                    cmdName: 'cellalignment',
                    value: {
                        align: 'right',
                        vAlign: 'middle'
                    }
                },
                {
                    cmdName: 'cellalignment',
                    value: {
                        align: 'left',
                        vAlign: 'bottom'
                    }
                },
                {
                    cmdName: 'cellalignment',
                    value: {
                        align: 'center',
                        vAlign: 'bottom'
                    }
                },
                {
                    cmdName: 'cellalignment',
                    value: {
                        align: 'right',
                        vAlign: 'bottom'
                    }
                }
            ]
        },
        '-',
        {
            group: '表格对齐方式',
            icon: 'aligntable',
            subMenu: [
                {
                    cmdName: 'tablealignment',
                    className: 'left',
                    label: '',
                    value: "left"
                },
                {
                    cmdName: 'tablealignment',
                    className: 'center',
                    label: '',
                    value: "center"
                },
                {
                    cmdName: 'tablealignment',
                    className: 'right',
                    label: '',
                    value: "right"
                }
            ]
        },
        '-',
        {
            label: '前插入段落',
            cmdName: 'insertparagraph',
            value: true
        }, {
            label: '后插入段落',
            cmdName: 'insertparagraph'
        },
        '-',
        {
            label: '复制(Ctrl C)',
            cmdName: 'copy'
        },
                {
            label: '粘贴(Ctrl V)',
            cmdName: 'paste'
        }
    ]

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:

原文出处:Yiiven https://cloud.tencent.com/developer/article/2193077

0 人点赞