百度的Ueditor编辑器出于安全性考虑，用户在html模式下粘贴进去的html文档会自动被去除样式和转义。虽然代码安全了，但是非常不方便。 当使用百度编辑器粘贴表格进去的时候，ueditor自动过滤掉了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插入的表格实际是没有边框的，编辑器中看到边框，其实是因为编辑器里面(<iframe>中)有下面这个全局css这是为了不让UEditor去掉粘贴的表格的边框，也就是table元素的border属性（不是border内联样式）
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边框样式显示为灰色虚线
3、最后就是table上右键菜单中有个"表格-设置表格边线可见"的功能。这个功能会让表格显示出实线边框，实际前台展示也是有边框的。
现在td是有实线边框的，可是th却还是虚线，所以要改下面的代码，增加一段对th的处理
注意：th就是表格标题列/行。可以用右键菜单"表格-插入表格标题列/行"插入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';
});
}
|
