百度编辑器ueditor插入表格没有边框颜色的解决方法_ueditor保存表格后为html打开不展示边框

作者：IT小白 | 2024-03-24 02:34:30

踩

ueditor保存表格后为html打开不展示边框

近来公司网站改版，后台富文本编辑器，我采用了百度编辑器ueditor，但是在使用的过程中发现很多问题，经过两天的时间各种调试。终于算是完成了。

其中插入表格，没有边框甚是头疼，查找网上各位大神的解决方案，最终觉得这个还不错http://www.cnblogs.com/xiangsj/p/6244794.html，收藏下，给大家分享下。

如果复制过来的Excel表格边框没有显示，解决方法:

                    utils.each(tables, function (table) {                        
                        //粘贴进来的表格table定义属性
                        domUtils.setAttributes(table, {
                            style:'border-left:1px solid #666; border-top:1px solid #666;',
                        });                                            
                        
                        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 #666; padding:5px;',
                            });                        
                        
                            if (isEmptyBlock(td)) {
                                domUtils.fillNode(me.document, td);
                            }
                            removeStyleSize(td, true);
                            //domUtils.removeAttributes(td, ['style'])
                        });
                    });

实现的效果如下图：

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

解决方法：

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

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

改成：

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

不同的版本的代码可能略微有点不同。

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

table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled");

在这句代码下面加一行：

table.setAttribute("style", "border-collapse:collapse;");

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

return '<table><tbody>' + html.join('') + '</tbody></table>'

改为：

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

此时，再刷新后台，插入一个表格，就有边框了。因为改的是ueditor.all.js，所以调用ueditor.all.js才有效，要是调用的ueditor.all.min.js，将修改的ueditor.all..js利用压缩工具压缩为ueditor.all.min.js再使用。

这三处代码弄清楚后，要是你还想扩展一些新的样式效果也是可以直接在这几个地方修改就好了。

附：编辑器表格处，右键=》表格=>表格属性，可以更改边框颜色等...

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/299300