百度的Ueditor編輯器出于安全性考慮，用戶在html模式下粘貼進(jìn)去的html文檔會(huì)自動(dòng)被去除樣式和轉(zhuǎn)義。雖然代碼安全了，但是非常不方便。 當(dāng)使用百度編輯器粘貼表格進(jìn)去的時(shí)候，ueditor自動(dòng)過濾掉了td的border。那么怎么讓百度編輯器顯示表格邊框呢？
修改辦法：
打開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);
});
});
|
2、UEditor插入的表格實(shí)際是沒有邊框的，編輯器中看到邊框，其實(shí)是因?yàn)榫庉嬈骼锩?<iframe>中)有下面這個(gè)全局css這是為了不讓UEditor去掉粘貼的表格的邊框，也就是table元素的border屬性（不是border內(nèi)聯(lián)樣式）
td,th{ border:1px solid #DDD; }
|
但是前臺(tái)展示是沒有這段全局css的，所以導(dǎo)致看不到邊框。
我們可以讓編輯器中無邊框的表格，顯示成虛線灰色的邊框，這也是其他很多html編輯器的處理方式。
找到并修改下面的代碼
utils.cssRule('table',
//選中的td上的樣式
'.selectTdClass{background-color:#edf5fa !important}' +
'table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}' +
//插入的表格的默認(rèn)樣式
'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上右鍵菜單中有個(gè)"表格-設(shè)置表格邊線可見"的功能。這個(gè)功能會(huì)讓表格顯示出實(shí)線邊框，實(shí)際前臺(tái)展示也是有邊框的。
現(xiàn)在td是有實(shí)線邊框的，可是th卻還是虛線，所以要改下面的代碼，增加一段對(duì)th的處理
注意：th就是表格標(biāo)題列/行?？梢杂糜益I菜單"表格-插入表格標(biāo)題列/行"插入th
最后如果你用的是ueditor.all.min.js，需要將改過的代碼壓縮一份min版本。
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';
});
}
|
