百度编辑器ueditor插⼊表格没有边框颜⾊的解决⽅法
最近公司测试的反馈:excel中复制过来的表格会⽆边框,上⾯同学给的⽅案不够直接,其实EXCEL 表格复制过来后,直接给加上⿊⾊边框体验多好(表格本来就需要边框啊)
⽅法如下(ueditor.all.js⽂件):
utils.each(tables, function (table) {
removeStyleSize(table, true);
utils.ElementsByTagName(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);
//veAttributes(table, ['style', 'border']);
//veAttributes(table, ['style']);//no remove table Style
utils.ElementsByTagName(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);
//veAttributes(td, ['style'])
});
});
实现的效果如下图:
如果⽤百度编辑器ueditor⼯具栏按钮,插⼊⼀个表格后,在编辑过程中有表格,但是保存提交后,在前台⽹页中没有边框颜⾊了。
解决⽅法:
1. 打开编辑器根⽬录下⾯的ueditor.all.js⽂件,到:
for (var c = 0; c < colsNum; c++) {
html.push('<td width="' + tdWidth + '"  vAlign="' + opt.tdvalign + '" >' + (browser.ie ? domUtils.fillChar : '<br/>') + '</td>')
}
改成:
table设置内边框for (var c = 0; c < colsNum; c++) {
html.push('<td width="' + tdWidth + '"  vAlign="' + opt.tdvalign + '" >' + (browser.ie ? domUtils.fillChar : '<br/>') + '</td>') }
不同的版本的代码可能略微有点不同。
2. 在ueditor.all.js⽂件中到:
table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled");
在这句代码下⾯加⼀⾏:
table.setAttribute("style", "border-collapse:collapse;");
3. 在ueditor.all.js⽂件中到:
return '<table><tbody>' + html.join('') + '</tbody></table>'
改为:
return '<table ><tbody>' + html.join('') + '</tbody></table>' 。
此时,再刷新后台,插⼊⼀个表格,就有边框了。因为改的是ueditor.all.js,所以调⽤ueditor.all.js才有效,要是调⽤的ueditor.all.min.js,那么就需要更改ueditor.all.min.js⽂件了。
这三处代码弄清楚后,要是你还想扩展⼀些新的样式效果也是可以直接在这⼏个地⽅修改就好了。
附:编辑器表格处,右键=》表格=>表格属性,可以更改边框颜⾊等...

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。