百度UEditor粘貼或插入的表格不顯示邊框的解決辦法

這個方法是我自己研究出來的。

編輯器里面可以看到表格有邊框，在前台頁面展示出來的卻沒有邊框。

 

修改辦法：

打開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);
    });
});

這是為了不讓UEditor去掉粘貼的表格的邊框，也就是table元素的border屬性（不是border內聯樣式）

 

 

2、UEditor插入的表格實際是沒有邊框的，編輯器中看到邊框，其實是因為編輯器里面(<iframe>中)有下面這個全局css

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

但是前台展示是沒有這段全局css的，所以導致看不到邊框。

 

我們可以讓編輯器中無邊框的表格，顯示成虛線灰色的邊框，這也是其他很多html編輯器的處理方式。

找到並修改下面的代碼

utils.cssRule('table',
            //選中的td上的樣式
            '.selectTdClass{background-color:#edf5fa !important}' +
                'table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}' +
                //插入的表格的默認樣式
                'table{margin-bottom:10px;border-collapse:collapse;display:table;}' +
                'td,th{padding: 5px 10px;border: 1px dashed #DDD;}' + //這里修改 1px solid #DDD 為 1px dashed #DDD
                'caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' +
                'th{border-top:1px dashed #BBB;background-color:#F7F7F7;}' + //這里修改 1px solid #BBB 為 1px dashed #BBB
                'table tr.firstRow th{border-top-width:2px;}' +
                '.ue-table-interlace-color-single{ background-color: #fcfcfc; } .ue-table-interlace-color-double{ background-color: #f7faff; }' +
                'td p{margin:0;padding:0;}', me.document);

目的是讓全局的td/th邊框樣式顯示為灰色虛線

 

 

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版本。