UEditor粘贴或插入的表格不显示边框的解决办法_execcommand: function () { var table =…

现状描述:若复制word中表格内容或excel表格内容至正文编辑框中后，表格没了，显示仅是单元格文字
这里说一下我的解决方案

1.样式

我拿到这个bug后首先考虑的就是table的border的样式丢失了,所以在我参考了几篇文章后 尝试了一下解决方案

修改ueditor.all.js

1.在文件中找到如下代码并修改

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);
    });
});

1
2
3
4
5
6
7
8
9
10
11

这是为了在复制表格的时候不被ueditor去掉border属性
2.在我们插入表格后可以看到边框是因为编辑器里面(<iframe>中)有下面这个全局css

td,th{ border:1px solid #DDD; }
1
1

但是前台展示是没有这段全局css的，所以导致看不到边框。
我们可以让编辑器中无边框的表格，显示成虚线灰色的边框，这也是其他很多html编辑器的处理方式。
找到并修改下面的代码

utils.cssRule('table',
            //选中的td上的样式
            '.selectTdClass{background-color:#edf5fa !important}' +
                'table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}' +
                //插入的表格的默认样式
                'table{margin-bottom:10px;border-collapse:collapse;display:table;}' +
                'td,th{padding: 5px 10px;border: 1px dashed #DDD;}' + //这里修改 1px solid #DDD 为 1px dashed #DDD
                'caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' +
                'th{border-top:1px dashed #BBB;background-color:#F7F7F7;}' + //这里修改 1px solid #BBB 为 1px dashed #BBB
                'table tr.firstRow th{border-top-width:2px;}' +
                '.ue-table-interlace-color-single{ background-color: #fcfcfc; } .ue-table-interlace-color-double{ background-color: #f7faff; }' +
                'td p{margin:0;padding:0;}', me.document);

1
2
3
4
5
6
7
8
9
10
11
12
13

目的是让全局的td/th边框样式显示为灰色虚线
3、最后就是table上右键菜单中有个"表格-设置表格边线可见"的功能。这个功能会让表格显示出实线边框，实际前台展示也是有边框的。
现在td是有实线边框的，可是th却还是虚线，所以要改下面的代码，增加一段对th的处理
注意：th就是表格标题列/行。可以用右键菜单"表格-插入表格标题列/行"插入th

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';
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最后如果你用的是ueditor.all.min.js，需要将改过的代码压缩一份min版本。

当然，如果上面的方法试过仍然不好用的话可以继续往下看

2.Ueditor黑白名单与xss过滤

后来经过我测试发现我得表格没有边框是因为我得table 都被转成了p 标签 ，就这样我得重心开始转移，又查看了几篇文章

百度编辑器Ueditor 黑白名单过滤

serialize: 黑白名单配置。UEditor针对进入编辑器的富文本内容提供了节点级别的过滤，可以通过该配置的修改来达到控制富文本内容的目的,且自动开启

黑白名单可以同时使用，也可以单独分开使用。
黑名单中的标签将会被编辑器完整地过滤掉，包括标签本身以及标签之内的任何内容。
而不在白名单之中的那些标签则仅被过滤了标签本身，其内容会继续走过滤流程。

Ueditor分为前端配置与后端配置,在这两个地方都可以设置黑白名单

var ue = UE.getEditor('jsNewsNoticeContent', {
                toolbars:btnCmds,
                retainOnlyLabelPasted:true,
                pasteplain:true,
                width:800,
                'insertorderedlist':{  
                    'decimal' : '' ,         //'1,2,3...'  
                    'lower-alpha' : '' ,    // 'a,b,c...'  
                    'lower-roman' : '' ,    //'i,ii,iii...'  
                    'upper-alpha' : '' ,   
                    'upper-roman' : ''      //'I,II,III...'  
                },
                insertunorderedlist : {  
                    // 系统自带  
                    'circle' : '',  // '○ 小圆圈'  
                    'disc' : '',    // '● 小圆点'  
                    'square' : ''   //'■ 小方块'  
                },
                'filterTxtRules' : function(){
                	  function transP(node){
                	      node.tagName = 'p';
                	      node.setStyle();
                	  }
                	  return {
                	      // //直接删除及其字节点内容
                	      // '-' : 'script style object iframe embed input select',
                	      // 'p': {$:{}},
                	      // 'br':{$:{}},
                	      // 'div':{$:{}},
                	      // 'li':{$:{}},
                	      // 'caption':{$:{}},
                	      // 'th':{$:{}},
                	      // 'tr':{$:{}},
                	      // 'h1':{$:{}},'h2':{$:{}},'h3':{$:{}},'h4':{$:{}},'h5':{$:{}},'h6':{$:{}},'h7':{$:{}},
                	      // 'td':function(node){
                	      //     //没有内容的td直接删掉
                	      //     var txt = !!node.innerText();
                	      //     if(txt){
                	      //         node.parentNode.insertAfter(UE.uNode.createText('    '),node);
                	      //     }
                	      //     node.parentNode.removeChild(node,node.innerText())
                	      // }
                	  }
                	}()
            });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

可以看到有一个filterTxtRules 配置项就是过滤标签的,现在我们只要将它注释掉我们的表格无边框问题就完美解决了

接下来在我们的后端配置ueditor-config.js中看一下我们的黑白名单配置

		 blackList:{style:1, link:1,object:1, input:1, meta:1}, 
// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
		,whitList: {
			footer: [],
			h1:     ['class', 'style'],
			h2:     ['class', 'style'],
			h3:     ['class', 'style'],
			h4:     ['class', 'style'],
			h5:     ['class', 'style'],
			h6:     ['class', 'style'],
			span:   ['class', 'style'],
			table:  ['width', 'border', 'align', 'valign', 'class', 'style'],
			tbody:  ['align', 'valign', 'class', 'style'],
			td:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
			tfoot:  ['align', 'valign', 'class', 'style'],
			th:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
			thead:  ['align', 'valign', 'class', 'style'],
			tr:     ['rowspan', 'align', 'valign', 'class', 'style'],
			tt:     [],
			u:      [],
			ul:     ['class', 'style']
		}
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

该配置中，blackList黑名单中不允许编辑器中出现style，link等标签，任何外部粘贴进来的数据如果包含这些节点（包括其子节点），都会被编辑器过滤掉。而白名单中的配置则表示允许对应标签中存在对应的属性或者子节点

文章参看
样式解决方案1
样式解决方案2
黑白名单1
黑白名单2