解决百度Ueditor编辑器表格不显示边框问题

一、主要内容

CMS使用百度Ueditor编辑器中的表格功能，在编辑模式下可以正常显示边框，而文章发布之后表格不能显示边框。本博文经过查阅相关资料，最终解决了该问题。

二、使用平台

1. dedecms V5.7 SP1

2. Ueditor 1.4.3

三、实现步骤

3.1 现象描述

如上图所示在编辑模式下，表格边框可以正常显示。但是发布文章后，并未看到表格边框，如下图所示。

3.2 查阅到的解决方法

(1) 引用ueditor.parse.js文件

在“解决 ueditor表格在页面上不显示的问题”中给出了通过引用ueditor.parse.js来实现表格边框的显示，经过尚为网实验，并未解决该问题。

(2) 修改ueditor.all.js文件

在“百度编辑器ueditor插入表格没有边框,没有颜色的解决方法”中给出了通过修改ueditor.all.js文件来实现表格边框的显示，经过尚为网实验，并未解决该问题，而且在内容页引用该文件后，前后并没有变化。

(3) 修改全局CSS文件

这个方法是在制作模板的时候，添加内容里跟表格相关的CSS样式，通过这个方法来实现，可以明确的是，该方法可行的，只是尚为网太懒，没有通过该方法去实现。

3.3 最简单的方法

其实，通过编辑模式下最简单的设置即可完成。如下图所示：

即，在表格处，右键——>表格——>设置表格边线可见，这样就可以实现，具体效果，如下所示：

这样，表格边框就可以显示出来了，而且可以通过编辑模式下的表格属性设置边框颜色等诸多功能。

但是，细心的读者通过上上一个图可以看到每个表格都是分离的，这个怎么解决呢？

3.4 解决表格边框间距问题

仍是在网上搜到一个解决方法：“在网站制作时ueditor 设置表格间距”，

在网站制作时ueditor 添加表格时，表格的显示边框时有间距，边框线成了两个，看起来很不美观，可以能过设置表格间距为0来达到只一条细线的效果，可以在在ueditor.all.js中找到UE.commands['inserttable']找到这个方法，把在创建表格时加上cellpadding="0" cellspacing="0" 或者在TABLE表格上加上style="border-collapse:collapse" 样式。

其给出了两种方法：

(1)修改ueditor.all.js文件

由于3.2 (2)中已经尝试过模板内容页引用该文件无效果的结论，因此，这里尝试后，仍不能解决该问题。

(2)table表格加上style样式

这个方法略微麻烦，即在编辑情况下的源码模式下，人为的为table标签添加该样式，

这样就可以实现了，效果如下：

顶一下

(8)

 

72.70%

踩一下

(3)

 

27.30%

 

本文地址http://www.sunev.cn/web/180.html，转载请注明出处，谢谢！