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('<tdstyle="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);  

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

展开阅读全文

没有更多推荐了,返回首页