百度UEditor粘贴或插入的表格不显示边框的解决办法
来源:互联网 发布:viewer.js使用示例 编辑:程序博客网 时间:2024/04/29 06:17
原文链接:http://blog.csdn.net/lovelyelfpop/article/details/51678742
这个方法是我自己研究出来的。
编辑器里面可以看到表格有边框,在前台页面展示出来的却没有边框。
修改办法:
打开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); });});
这是为了不让UEditor去掉粘贴的表格的边框,也就是table元素的border属性(不是border内联样式)
td,th{ border:1px solid #DDD; }但是前台展示是没有这段全局css的,所以导致看不到边框。
我们可以让编辑器中无边框的表格,显示成虚线灰色的边框,这也是其他很多html编辑器的处理方式。
找到并修改下面的代码
utils.cssRule('table', //选中的td上的样式 '.selectTdClass{background-color:#edf5fa !important}' + 'table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}' + //插入的表格的默认样式 'table{margin-bottom:10px;border-collapse:collapse;display:table;}' + 'td,th{padding: 5px 10px;border: 1px dashed #DDD;}' + //这里修改 1px solid #DDD 为 1px dashed #DDD 'caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' + 'th{border-top:1px dashed #BBB;background-color:#F7F7F7;}' + //这里修改 1px solid #BBB 为 1px dashed #BBB 'table tr.firstRow th{border-top-width:2px;}' + '.ue-table-interlace-color-single{ background-color: #fcfcfc; } .ue-table-interlace-color-double{ background-color: #f7faff; }' + 'td p{margin:0;padding:0;}', me.document);目的是让全局的td/th边框样式显示为灰色虚线
3、最后就是table上右键菜单中有个"表格-设置表格边线可见"的功能。这个功能会让表格显示出实线边框,实际前台展示也是有边框的。
现在td是有实线边框的,可是th却还是虚线,所以要改下面的代码,增加一段对th的处理
注意:th就是表格标题列/行。可以用右键菜单"表格-插入表格标题列/行"插入th
execCommand: function () { var table = getTableItemsByRange(this).table; utils.each(domUtils.getElementsByTagName(table,'td'),function(td){ td.style.borderWidth = '1px'; td.style.borderStyle = 'solid'; td.style.borderColor = 'windowtext'; }); //增加下面一段 utils.each(domUtils.getElementsByTagName(table,'th'),function(th){ th.style.borderWidth = domUtils.getComputedStyle(th, "border-width"); th.style.borderStyle = 'solid'; th.style.borderColor = 'windowtext'; });}
最后如果你用的是ueditor.all.min.js,需要将改过的代码压缩一份min版本。
2 0
- 百度UEditor粘贴或插入的表格不显示边框的解决办法
- 百度编辑器ueditor插入表格没有边框颜色的解决方法
- 解决百度Ueditor编辑器表格不显示边框问题
- ueditor插入表格后预览不显示边框
- 百度编辑器ueditor插入表格没有边框,没有颜色的解决方法
- 百度编辑器ueditor插入表格没有边框,没有颜色的解决方法
- 百度编辑器ueditor插入表格没有边框,没有颜色的解决方法
- UEditor 粘贴 Excell 中的表格时报错导致无法粘贴的解决办法
- 解决 ueditor表格在页面上不显示的问题
- 使用百度编辑器ueditor表格无法显示边框以及边框颜色等系列问题解决方案
- 解决表格没有内容不显示边框的代码
- 解决表格边框不显示的问题-HTML-XHTML-CSS
- UEditor编辑框插入的表格显示页无法显示的问题
- UEditor 的表格加载正常,第二次却显示不出来,vue.js里面的解决方法
- LabVIEW中查询数据库的数值,或读取excel表格中的数值时,不显示小数点前面0的解决办法
- Table的边框问题--不显示四周边框、隐藏横线或纵线
- 百度编辑器ueditor代码高亮效果前台不显示的解决方法
- 百度编辑器ueditor代码高亮效果前台不显示的解决方法
- ubuntu下eclipse中配置tomcate7
- 登录用户缓存试验
- Android入门--Spinner 与setDropDownViewResource自定义下拉菜单
- 开发平台介绍篇
- 改变条标题栏透明度在6.0上的问题
- 百度UEditor粘贴或插入的表格不显示边框的解决办法
- 安卓笔记 自定义相机
- Drawable
- Ubuntu 16.04 下载和编译android 6 源码
- 计算机视觉领域相关主页 汇总
- dex-method-counts计算apk方法数,防65536.
- MapReduce 运行原理---再聊MapReduce 的 Map ,Reduce 以及shuffle 过程
- 0603 c语言函数
- CPU内部架构和工作原理