Ueditor 1.4.3 插入表格后无边框无颜色,不能正常显示

Ueditor 1.4.3 插入表格后无边框无颜色,不能正常显示

在使用Ueditor 插入表格的功能时,发现插入时正常。 但保存到后台后再取出来,表格不能正常显示。查看保存的html代码,发现保存时并未给table 添加border属性。以致于再次取出来时,不能正常显示表格。解决此问题的方法是修改ueditor.all.js中的部分代码。 要修改的地方如下:

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>')

}

 

改成:

 

for (var c = 0; c < colsNum; c++) {

    html.push('<td style="border:1px solid #ccc;" 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 style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>' 。

 

此时,重新插入一个表格,就有边框了。因为改的是ueditor.all.js,所以调用ueditor.all.js才有效,要是调用的ueditor.all.min.js,那么就需要更改ueditor.all.min.js文件了。

另外需要注意一点: ueditor.all.min.js 是ueditor.all.js 的压缩版本。 两者的功能是一样的。只是文件大小不同。 引用其中一个即可。如果你引用的是 ueditor.all.min.js,  那么当你修改完ueditor.all.js文件后,需要重新压缩后替换掉原来的ueditor.all.min.js文件方可生效。  

js文件压缩方法:http://tool.oschina.net/jscompress/

如果不想压缩,则你可直接引用ueditor.all.js文件。 只不过文件比较大时,比较耗内存。 

例如,在我的项目中,我起初引用的ueditor.all.min.js 文件。 我修改了ueditor.all.js, 但发现并不起作用。 于是修改了引用。便可正常显示表格样式。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值