百度編輯器ueditor插入表格沒有邊框顏色的解決方法

附：如果從word excel 中 復制的表格提交后無邊框，參考這個同學的，寫的很詳細：   http://blog.csdn.net/lovelyelfpop/article/details/51678742

最近公司測試的反饋：excel中 復制過來的表格會無邊框，上面同學給的方案不夠直接，其實EXCEL 表格復制過來后，直接給加上黑色邊框體驗多好（表格本來就需要邊框啊）

方法如下（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);  
    });  
});  

 

在上面原同學基礎上的改裝成如下：

                    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.min.js文件了。

 

這三處代碼弄清楚后，要是你還想擴展一些新的樣式效果也是可以直接在這幾個地方修改就好了。

 

附：編輯器表格處，右鍵=》表格=>表格屬性，可以更改邊框顏色等...