百度UEditor粘贴或插入的表格不显示边框的解决办法

原文链接:http://blog.csdn.net/lovelyelfpop/article/details/51678742

参考:https://www.cnblogs.com/xiangsj/p/6244794.html

打开ueditor.all.js

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

 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内联样式)

2、UEditor插入的表格实际是没有边框的,编辑器中看到边框,其实是因为编辑器里面(<iframe>中)有下面这个全局css

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

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

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

成为不了聪明的人,那就做一个有耐心、肯钻研,坚持不懈,永不放弃的人……
原文地址:https://www.cnblogs.com/wrld/p/9087700.html