UEditor貼上或插入的表格不顯示邊框的解決辦法
現狀描述:若複製word中表格內容或excel表格內容至正文編輯框中後，表格沒了，顯示僅是單元格文字 這裡說一下我的解決方案
1.樣式
我拿到這個bug後首先考慮的就是table的border的樣式丟失了,所以在我參考了幾篇文章後 嘗試了一下解決方案
修改ueditor.all.js
1.在檔案中找到如下程式碼並修改
utils.each(tables, function (table) {
removeStyleSize(table, true);
domUtils.removeAttributes(table, ['style']); //改這裡，原來是 ['style', 'border'] 這是為了在複製表格的時候不被ueditor去掉border屬性
2.在我們插入表格後可以看到邊框是因為編輯器裡面(<iframe>中)有下面這個全域性css
td,th 但是前臺展示是沒有這段全域性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}' 目的是讓全域性的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版本。
當然，如果上面的方法試過仍然不好用的話可以繼續往下看
2.Ueditor黑白名單與xss過濾
後來經過我測試發現我得表格沒有邊框是因為我得table 都被轉成了p 標籤 ，就這樣我得重心開始轉移，又查看了幾篇文章
百度編輯器Ueditor 黑白名單過濾
serialize: 黑白名單配置。UEditor針對進入編輯器的富文字內容提供了節點級別的過濾，可以通過該配置的修改來達到控制富文字內容的目的,且自動開啟
黑白名單可以同時使用，也可以單獨分開使用。 黑名單中的標籤將會被編輯器完整地過濾掉，包括標籤本身以及標籤之內的任何內容。 而不在白名單之中的那些標籤則僅被過濾了標籤本身，其內容會繼續走過濾流程。
Ueditor分為前端配置與後端配置,在這兩個地方都可以設定黑白名單
var ue = UE.getEditor('jsNewsNoticeContent', {
toolbars:btnCmds,
retainOnlyLabelPasted:true,
pasteplain:true,
width:800,
'insertorderedlist':{
'decimal' : '' , //'1,2,3...'
'lower-alpha' : '' , // 'a,b,c...'
'lower-roman' : '' , //'i,ii,iii...'
'upper-alpha' : '' ,
'upper-roman' : '' //'I,II,III...'
},
insertunorderedlist : {
// 系統自帶
'circle' : '', // '○ 小圓圈'
'disc' : '', // '● 小圓點'
'square' : '' //'■ 小方塊'
},
'filterTxtRules' : function(){
function transP(node){
node.tagName = 'p';
node.setStyle();
}
return {
// //直接刪除及其位元組點內容
// '-' : 'script style object iframe embed input select',
// 'p': {$:{}},
// 'br':{$:{}},
// 'div':{$:{}},
// 'li':{$:{}},
// 'caption':{$:{}},
// 'th':{$:{}},
// 'tr':{$:{}},
// 'h1':{$:{}},'h2':{$:{}},'h3':{$:{}},'h4':{$:{}},'h5':{$:{}},'h6':{$:{}},'h7':{$:{}},
// 'td':function(node){
// //沒有內容的td直接刪掉
// var txt = !!node.innerText();
// if(txt){
// node.parentNode.insertAfter(UE.uNode.createText(' '),node);
// }
// node.parentNode.removeChild(node,node.innerText())
// }
}
}()
});
可以看到有一個filterTxtRules 配置項就是過濾標籤的,現在我們只要將它註釋掉我們的表格無邊框問題就完美解決了
接下來在我們的後端配置ueditor-config.js中看一下我們的黑白名單配置
blackList:{style:1, link:1,object:1, input:1, meta:1},
// xss過濾白名單 名單來源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
,whitList: {
footer: [],
h1: ['class', 'style'],
h2: ['class', 'style'],
h3: ['class', 'style'],
h4: ['class', 'style'],
h5: ['class', 'style'],
h6: ['class', 'style'],
span: ['class', 'style'],
table: ['width', 'border', 'align', 'valign', 'class', 'style'],
tbody: ['align', 'valign', 'class', 'style'],
td: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
tfoot: ['align', 'valign', 'class', 'style'],
th: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
thead: ['align', 'valign', 'class', 'style'],
tr: ['rowspan', 'align', 'valign', 'class', 'style'],
tt: [],
u: [],
ul: ['class', 'style']
}
};
該配置中，blackList黑名單中不允許編輯器中出現style，link等標籤，任何外部貼上進來的資料如果包含這些節點（包括其子節點），都會被編輯器過濾掉。而白名單中的配置則表示允許對應標籤中存在對應的屬性或者子節點