添加编辑器的table功能

cmp-portal/css/common.css

@charset "utf-8";
/*reset*/
p,dl,dt,dd,ul,ol,li,a,em,div,span,th,td{margin:0;padding:0; word-break:break-all; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
p,dl,dt,dd,ul,ol,li,a,em,div,span{margin:0;padding:0; word-break:break-all; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
form,label,button,input,select,textarea{font-size:14px; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;margin:0;padding:0; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
h1,h2,h3,h4,h5,h6{font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
html,body{height:100%; width:100%; margin:0;padding:0;font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
input{vertical-align:middle; outline:none;}
img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic;border:0;padding:0; margin:0;}
ul,ol{list-style:none;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
table>tbody>tr>td,table>tbody>tr>th{padding: 5px 10px;border: 1px solid #DDD;}
body{height:auto;position: relative;min-height: 100%;}
a{text-decoration:none;color:#666}

css/common.css

/*reset*/
p,dl,dt,dd,ul,ol,li,a,em,div,span,th,td{margin:0;padding:0; word-break:break-all; font-family: PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif}
form,label,button,input,select,textarea{font-size:14px; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%;margin:0;padding:0; font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
h1,h2,h3,h4,h5,h6{font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
html,body{height:100%; width:100%; margin:0;padding:0;font-family:PingFang SC,Arial,Microsoft Yahei,WenQuanYi Micro Hei,Helvetica Neue,Hiragino Sans GB,sans-serif;}
input{vertical-align:middle; outline:none;}
img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic;border:0;padding:0; margin:0;}
ul,ol{list-style:none;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
table>tbody>tr>td,table>tbody>tr>th{padding: 5px 10px;border: 1px solid #DDD;}
a,a:active,a:hover{outline:0;text-decoration:none;}
/* CSS Document */

js/ueditor/ueditor.all.js

                for (var r = 0; r < rowsNum; r++) {
                    html.push('<tr' + (r == 0 ? ' class="firstRow"':'') + '>');
                    for (var c = 0; c < colsNum; c++) {
                        html.push('<td width="' + tdWidth + '"  vAlign="' + opt.tdvalign + '" >' + (browser.ie && browser.version < 11 ? domUtils.fillChar : '<br/>') + '</td>')
                        html.push('<td style="border:1px solid #ccc;" width="' + tdWidth + '"  vAlign="' + opt.tdvalign + '" >' + (browser.ie && browser.version < 11 ? domUtils.fillChar : '<br/>') + '</td>')
                    }
                    html.push('</tr>')
                }
                //禁止指定table-width
                return '<table><tbody>' + html.join('') + '</tbody></table>'
                return '<table style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>'
            }
            if (!opt) {
            if (!table) return -1;
            return 0;
        },
        execCommand: function () {
            var table = getTableItemsByRange(this).table;
            utils.each(domUtils.getElementsByTagName(table,'td'),function(td){
                td.style.borderWidth = '1px';
                td.style.borderStyle = 'solid';
            })
        }
        execCommand: function () {
		    var table = getTableItemsByRange(this).table;
		    utils.each(domUtils.getElementsByTagName(table,'td'),function(td){
		        td.style.borderWidth = '1px';
		        td.style.borderStyle = 'solid';
		        td.style.borderColor = 'windowtext';
		    });
		    //增加下面一段
		    utils.each(domUtils.getElementsByTagName(table,'th'),function(th){
		        th.style.borderWidth = domUtils.getComputedStyle(th, "border-width");
		        th.style.borderStyle = 'solid';
		        th.style.borderColor = 'windowtext';
		    });
		}
    };
    function resetTdWidth(table, editor) {
        var tds = domUtils.getElementsByTagName(table,'td th');
                    if (domUtils.findParentByTagName(me.selection.getStart(), 'caption', true)) {
                        div.innerHTML = div[browser.ie ? 'innerText' : 'textContent'];
                    }
                } else {
                    utils.each(tables, function (table) {
                        removeStyleSize(table, true);
                        domUtils.removeAttributes(table, ['style', 'border']);
                        utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {
                            if (isEmptyBlock(td)) {
                                domUtils.fillNode(me.document, td);
                            }
                            removeStyleSize(td, true);
//                            domUtils.removeAttributes(td, ['style'])
                        });
                    });
                } else {
                	utils.each(tables, function (table) {                        
                        //粘贴进来的表格table定义属性
                        domUtils.setAttributes(table, {
                            style:'border-left:1px solid #666; border-top:1px solid #ccc;',
                        });                                            
                        
                        removeStyleSize(table, true);
                        domUtils.removeAttributes(table, ['style', 'border']);
                        //domUtils.removeAttributes(table, ['style']);//no remove table Style
                        utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {
                            
                            //粘贴进来的表格td定义属性
                            domUtils.setAttributes(td, {
                                style:'border-bottom:1px solid #666; border-right:1px solid #ccc; padding:5px;',
                            });                        
                        
                            if (isEmptyBlock(td)) {
                                domUtils.fillNode(me.document, td);
                            }
                            removeStyleSize(td, true);
                            //domUtils.removeAttributes(td, ['style'])
                        });
                    });
//                  utils.each(tables, function (table) {
//                      removeStyleSize(table, true);
//                      domUtils.removeAttributes(table, ['style']); // ['style', 'border']
//                      utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {
//                          if (isEmptyBlock(td)) {
//                              domUtils.fillNode(me.document, td);
//                          }
//                          removeStyleSize(td, true);
//                      });
//                  });
                }
                html.html = div.innerHTML;
            }
        execCommand: function (cmd) {
            var table = getTableItemsByRange(this).table;
            table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled");
            table.setAttribute("style", "border-collapse:collapse;");
            cmd == "enablesort" ? domUtils.addClass(table,"sortEnabled"):domUtils.removeClasses(table,"sortEnabled");
        }
    };
                if (json.state == 'SUCCESS' && json.url) {
                    successHandler(json);
                } else {
                	alert(1111);
                    errorHandler(json.state);
                }
            }catch(er){
                '<div class="edui-box edui-icon"></div>' +
                '</div>' +
                '<div class="edui-box edui-splitborder"></div>' +
//              '<div class="edui-box edui-arrow" onclick="$$._onArrowClick();"></div>' +
                '<div class="edui-box edui-arrow" onclick="$$._onArrowClick();"></div>' +
                '</div></div></div>';
        },
        showPopup: function (){

js/ueditor/ueditor.config.js

            'insertorderedlist', 'insertunorderedlist', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
            'spechars', '|',
           	'superscript', 'subscript','|','link','simpleupload','insertimage','formatmatch',
           	'superscript', 'subscript','|','link','simpleupload','insertimage', '|', 'formatmatch', '|',
           	'inserttable', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols'
        ]]
        
        /*, toolbars: [[
        //粘贴只保留标签，去除标签所有属性
        //,retainOnlyLabelPasted: false
        ,pasteplain:true  //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
        ,pasteplain:false  //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
        //纯文本粘贴模式下的过滤规则
        //'filterTxtRules' : function(){
        //    function transP(node){
		,outputXssFilter: true
		// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
		,whitList: {
			/*a:      ['target', 'href', 'title', 'class', 'style'],
			a:      ['target', 'href', 'title', 'class', 'style'],
			abbr:   ['title', 'class', 'style'],
			address: ['class', 'style'],
			area:   ['shape', 'coords', 'href', 'alt'],
			tt:     [],
			u:      [],
			ul:     ['class', 'style'],
			video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']*/
			a:      ['target', 'href', 'title', 'class', 'style'],
			abbr:   [],
			address: [],
			area:   [],
			article: [],
			aside:  [],
			audio:  [],
			b:      [],
			bdi:    [],
			bdo:    [],
			big:    [],
			blockquote: [],
			br:     [],
			caption: [],
			center: [],
			cite:   [],
			code:   [],
			col:    [],
			colgroup: [],
			dd:     [],
			del:    [],
			details: [],
			div:    [],
			dl:     [],
			dt:     [],
			em:     [],
			font:   [],
			footer: [],
			h1:     [],
			h2:     [],
			h3:     [],
			h4:     [],
			h5:     [],
			h6:     [],
			header: [],
			hr:     [],
			i:      [],
			img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],
			ins:    [],
			li:     [],
			mark:   [],
			nav:    [],
			ol:     [],
			p:      ['style'],
			pre:    [],
			s:      [],
			section:[],
			small:  [],
			span:   [],
			sub:    [],
			sup:    [],
			strong: [],
			table:  [],
			tbody:  [],
			td:     [],
			tfoot:  [],
			th:     [],
			thead:  [],
			tr:     [],
			tt:     [],
			u:      [],
			ul:     [],
			video:  []
			video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']
		}
    };