赞
踩
编辑器里面可以看到表格有边框,在前台页面展示出来的却没有边框。
修改办法:
打开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);
});
});
修改为 更好的体验:
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工具栏按钮,插入一个表格后,在编辑过程中有表格,但是保存提交后,在前台网页中没有边框颜色了。
解决方法:
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>')
}
不同的版本的代码可能略微有点不同。
table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled");
在这句代码下面加一行:
table.setAttribute("style", "border-collapse:collapse;");
在ueditor.all.js文件中找到:
return ‘
’ + html.join(’’) + ‘改为:
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文件了。
这三处代码弄清楚后,要是你还想扩展一些新的样式效果也是可以直接在这几个地方修改就好了。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。