解决百度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,转载请注明出处,谢谢!

posted @ 2016-08-25 15:00  水晶糖  阅读(16678)  评论(0编辑  收藏  举报