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

修改辦法：

打開ueditor.all.js

一、找到下面的代碼，修改

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內聯樣式）

二、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邊框樣式顯示爲灰色虛線

 

 

 

三、最後就是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版本。