当前位置:   article > 正文

百度编辑器中粘贴进去的表格和点击插入的表格按钮插入的表格在保存后,前台表格的边框显示不出来_编辑器里面可以看到表格有边框,在前台页面展示出来的却没有边框。

编辑器里面可以看到表格有边框,在前台页面展示出来的却没有边框。

编辑器里面可以看到表格有边框,在前台页面展示出来的却没有边框。
修改办法:

打开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

修改为 更好的体验:

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'])
                        });
                    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

效果:
在这里插入图片描述

如果用百度编辑器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>')
}
  • 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>')
}
  • 1
  • 2
  • 3

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

  1. 在ueditor.all.js文件中找到:
table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled");
  • 1

在这句代码下面加一行:

table.setAttribute("style", "border-collapse:collapse;");
  • 1
  1. 在ueditor.all.js文件中找到:

    return ‘

    ’ + html.join(’’) + ‘

改为:

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

此时,再刷新后台,插入一个表格,就有边框了。因为改的是ueditor.all.js,所以调用ueditor.all.js才有效,要是调用的ueditor.all.min.js,那么就需要更改ueditor.all.min.js文件了。

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/299343
推荐阅读
相关标签
  

闽ICP备14008679号