现在的位置: 首页 -> 前端学习 -> JS前端 -> 百度编辑器ueditor插入表格没有边框,没有颜色的解决方法

百度编辑器ueditor插入表格没有边框,没有颜色的解决方法

2014-08-28 22:12 评论数 5 ⁄ 被浏览 32018 views+

百度编辑器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>')

}


改成:


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文件了。


这三处代码弄清楚后,要是你还想扩展一些新的样式效果也是可以直接在这几个地方修改就好了。

 

文章出自:https://www.daixiaorui.com/read/115.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

目前有 5 条评论  @我要评论

  1. 5楼DYDZ : 2020-04-29 14:17:02 评论说: @回复

    在boostrap下,应用百度编辑器插入表格,PC端显示正常,而在移动端撑破溢出,请问如何修改百度编辑器设置确保百度编辑器中插入的表格自适应PC端和移动端的DIV宽度。

  2. 4楼123 : 2017-09-23 16:33:05 评论说: @回复

    不用改,直接在set放到页面的时候,给table设个CSS就搞定了

  3. 3楼hellokevin : 2016-12-14 16:19:49 评论说: @回复

    你把#ccc改成#000试试?

  4. 2楼lingdx : 2015-11-26 15:51:21 评论说: @回复

    不用改也行:在后台发布时点击表格->右键->表格->设置表格边线可见

    回复留言标识 sky 回复 lingdx: 给力

    2016-08-09 14:40:38  @回复

  5. 1楼donkeynan : 2015-11-06 09:44:46 评论说: @回复

    给力

您的每一个评论都是对我的一份支持

 博客二维码

昵称 *

邮箱 *