百度编辑器ueditor插入表格没有边框颜色的处理方法

发布时间：2023-11-10 15:51:20 所属栏目：经验来源：

导读：前段时间361源码给大家介绍了《织梦dedecms如何更换百度编辑器ueditor的教程》，不少同学都更换了，而且效果都很不错，细心的朋友发现了一个问题：

1、百度编辑器ueditor插入一个表格后，在编辑过程中有表格，但

前段时间361源码给大家介绍了《织梦dedecms如何更换百度编辑器ueditor的教程》，不少同学都更换了，而且效果都很不错，细心的朋友发现了一个问题：

1、百度编辑器ueditor插入一个表格后，在编辑过程中有表格，但是保存后，在前台网页中没有边框，也没有颜色。

2、excel中复制过来的表格会无边框。

发现问题我们就来解决，下面是361源码网在网络上收集和整理的，没有亲测，有兴趣的朋友可以测试看下。

修改办法：

打开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内联样式）

2、UEditor插入的表格实际是没有边框的，编辑器中看到边框，其实是因为编辑器里面(

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版本。

上面是一个童鞋发布到网络上的，有些朋友做了一些改进如下：

方法如下（ueditor.all.js文件）：

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);      }); });

在上面原同学基础上的改装成如下：

utils.each(tables, function (table) {

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!