解決百度Ueditor編輯器表格不顯示邊框問題

1、主要內容

    CMS使用百度Ueditor編輯器中的表格功能，在編輯模式下能夠正常顯示邊框，而文章發佈以後表格不能顯示邊框。本博文通過查閱相關資料，最終解決了該問題。

2、使用平臺

1. dedecms V5.7 SP1

2. Ueditor 1.4.3

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，轉載請註明出處，謝謝！