百度(du)的(de)Ueditor編(bian)(bian)(bian)輯器出于安全性考慮(lv)，用戶在html模(mo)式(shi)下粘(zhan)貼(tie)進去的(de)html文(wen)檔會自(zi)動被去除樣式(shi)和轉(zhuan)義。雖然代碼安全了，但是非常不方(fang)便(bian)。 當使(shi)用百度(du)編(bian)(bian)(bian)輯器粘(zhan)貼(tie)表格進去的(de)時候(hou)，ueditor自(zi)動過(guo)濾掉了td的(de)border。那么(me)怎么(me)讓百度(du)編(bian)(bian)(bian)輯器顯示表格邊框呢？
修(xiu)改辦法：
打(da)開ueditor.all.js
1、找(zhao)到下(xia)面的代(dai)碼，修改
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插入(ru)的(de)(de)表(biao)格實際是(shi)沒有邊(bian)框(kuang)的(de)(de)，編輯器中看(kan)到邊(bian)框(kuang)，其實是(shi)因為編輯器里(li)面(<iframe>中)有下面這個全局(ju)css這是(shi)為了不讓UEditor去掉粘貼的(de)(de)表(biao)格的(de)(de)邊(bian)框(kuang)，也(ye)就(jiu)是(shi)table元素的(de)(de)border屬性（不是(shi)border內聯樣式）
td,th{ border:1px solid #DDD; }
|
但是前臺展(zhan)示是沒有這段(duan)全局css的，所以導致看(kan)不到邊框。
我們可以讓編(bian)輯(ji)器中無邊(bian)框的表格，顯(xian)示成虛線灰色(se)的邊(bian)框，這也(ye)是(shi)其(qi)他很多html編(bian)輯(ji)器的處理方式(shi)。
找(zhao)到(dao)并修改(gai)下(xia)面(mian)的代(dai)碼
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);
|
目(mu)的是讓全(quan)局(ju)的td/th邊框樣式顯示為灰色虛(xu)線
3、最后就是table上(shang)右鍵菜(cai)單中有(you)個(ge)"表(biao)(biao)格(ge)-設置(zhi)表(biao)(biao)格(ge)邊線(xian)可(ke)見"的功能(neng)。這個(ge)功能(neng)會讓表(biao)(biao)格(ge)顯(xian)示(shi)出實線(xian)邊框，實際前臺展示(shi)也是有(you)邊框的。
現在td是(shi)有實線(xian)邊框(kuang)的(de)(de)，可是(shi)th卻(que)還是(shi)虛(xu)線(xian)，所以要(yao)改下面的(de)(de)代碼(ma)，增加(jia)一段(duan)對th的(de)(de)處(chu)理
注意：th就是(shi)表格(ge)(ge)標題列/行。可以(yi)用右鍵(jian)菜單"表格(ge)(ge)-插(cha)入表格(ge)(ge)標題列/行"插(cha)入th
最(zui)后(hou)如果你(ni)用的是(shi)ueditor.all.min.js，需要將改過的代碼壓縮一份min版本(ben)。
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';
});
}
|
