ueditor中table没有边线及修改边框颜色问题

废话少说，直接介绍方法。希望能帮到你们,打开ueditor.all.js

1、找到下面的代码，修改

[javascript]  view plain  copy

1. utils.each(tables, function (table) {  
2.     removeStyleSize(table, true);  
3.     domUtils.removeAttributes(table, ['style']); //改这里，原来是 ['style', 'border']  
4.     utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {  
5.         if (isEmptyBlock(td)) {  
6.             domUtils.fillNode(me.document, td);  
7.         }  
8.         removeStyleSize(td, true);  
9.     });  
10. });  

这是为了不让UEditor去掉粘贴的表格的边框，也就是table元素的border属性（不是border内联样式）

但是为了保险起见，在上面基础上再次改装成如下：

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

2、如果用百度编辑器ueditor工具栏按钮，插入一个表格后，在编辑过程中有表格，但是保存提交后，在前台网页中没有边框颜色了。

①. 打开编辑器根目录下面的ueditor.all.js文件，找到： 

1 2 3

for  ( var  c = 0; c < colsNum; c++) {      html.push( '<td width="'  + tdWidth +  '"  vAlign="'  + opt.tdvalign +  '" >'  + (browser.ie ? domUtils.fillChar :  '<br/>' ) +  '</td>' ) }

 

改成： 

1 2 3

for  ( var  c = 0; c < colsNum; c++) {      html.push( '<td style="border:1px solid #ddd; " width="'  + tdWidth +  '"  vAlign="'  + opt.tdvalign +  '" >'  + (browser.ie ? domUtils.fillChar :  '<br/>' ) +  '</td>' ) }

②. 在ueditor.all.js文件中找到：

table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled");
在这句代码下面加一行：
table.setAttribute("style", "border-collapse:collapse;");

③. 在ueditor.all.js文件中找到：

return '<table><tbody>' + html.join('') + '</tbody></table>'
改为：
return '<table style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>' 。

3.我们就需要在使用ueditor的页面来使用我们的设置了，过程如下：

　　 

但是，在设置表格边框颜色时，选择的颜色只能从他给出的颜色中选择，比如说我没有办法将他设成上面设置的border颜色一致，那么也可以通过修改代码完成默认设置：

找到并修改下面的代码

[css]  view plain  copy

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

将以上几点做好完成可以达到你想要的结果！