一、主要內容
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標簽添加該樣式,
這樣就可以實現了,效果如下:
本文地址http://www.sunev.cn/web/180.html,轉載請注明出處,謝謝!