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，但发现并不起作用。于是修改了引用。便可正常显示表格样式。

巴特西

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

最新文章

热门文章