解決百度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,轉載請注明出處,謝謝!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM