百度編輯器序號和項目符號不能顯示解決


在做論壇、個人網站、辦公OA,對於富文本編輯器的使用,業界使用最多、最好的應該是百度編輯器。
在使用百度編輯器做富文本編輯,碰到序號、項目符號,在個性化頁面展示不能顯示的問題。
簡單分析下,將百度編輯器,編輯后的HTML存儲,再用於個性化頁面顯示,對於指定序號和項目符號顯示沒有相關的樣式。
那解決起來就比較簡單了,把相關的樣式在個性化頁面單獨添加引用就可以了。

一、查看是什么樣式:

二、個性化頁面添加list-style-type樣式

通過w3school 找到, list-style-type介紹,把相關的項目符號樣式添加到個性化頁面就可以。

1.設置不同的列表樣

ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}

2.瀏覽器支持

IE Firefox Chrome Safari Opera

所有瀏覽器都支持 list-style-type 屬性。

注釋:任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian" 或 "inherit"。

3.定義和用法
list-style-type 屬性設置列表項標記的類型。

4.可能的值
CSS2 的值:

CSS2.1 的值:

disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
armenian | georgian | none | inherit

三、處理中文項目符號不顯示問題
經過上面處理,關於百度編輯器不能顯示序號和項目符號的問題,是不是能解決了?
經過測試,發現對於列表中羅列的樣式顯示都可以支持,但是對於一些中文的項目符號還是不可以,像(一)、(二)、(三)類似的符號。
那怎么處理呢?在深入分析下,繼續查看百度編輯器編輯后的頁面顯示HTML元素是什么?

1.查看生成頁面的樣式

發現有什么不同嗎?好像是一個背景圖片地址奧。http://bs.baidu.com/listicon/list-cn-1-1.gif

地址欄輸入看一下:


2.解決方法

經過第一步的分析,那就可以推導出,百度編輯器對於中文項目符號的顯示,使用的是一個個圖片渲染處理的。
那我們也可以在自己的網站下面新建一個文件夾存放百度的這些圖片,在個性化頁面處理指向我們自己的文件夾,
以防百度撤掉百度編輯器或項目符號對應的圖片放置在另外的服務器;
最簡單的處理方式就是,直接用百度編輯器的路勁,在個性化頁面加上樣式就OK了,讓我們再看下。
把生成的頁面的HTML全部在記事本中看下,你就明白了:

看見了沒,就是把這些關於項目符號的圖片加到你的個性化頁面,就能解決百度編輯器中文序號和項目符號不能顯示的問題。

四、百度編輯器其他問題處理
1.百度編輯器ueditor代碼高亮效果前台不顯示的解決方法

<link href="你的ueditor路徑/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="你的ueditor路徑/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> 
<script type="text/javascript">     
SyntaxHighlighter.all();      
</script>

PS:在內容里面插入代碼高亮顯示,后台編輯器中是可以自動換行的,但是發表后,在前台查看,發現代碼不能自動換行,直接超出了內容頁的邊界,造成極不美觀的效果。於是想盡辦法,查找問題,經過不懈努力,終於解決了此問題。

下面來分享下方法:
以下文件需要修改:
/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css
打開:shCoreDefault.css
找到81行,
<span style="font-size: 14px;">.syntaxhighlighter table {  <br><br>  width: 100% !important;  <br><br>    border: 1px solid #c0c0c0 !important;  <br><br>}<br></span>
修改為:
<span style="font-size: 14px;">.syntaxhighlighter table {  <br><br>  width: 100% !important; word-break:break-all;  <br><br>    border: 1px solid #c0c0c0 !important;  <br><br>}<br></span>

即可實現自動換行,增加了一句:word-break:break-all;代碼,意思是:強制打斷並換行的意思。

2.插入一個表格后,在編輯過程中有表格,但是保存后,在前台網頁中沒有邊框,也沒有顏色
(1). 打開編輯器根目錄下面的ueditor.all.js文件,找到:
for (var c = 0; c < colsNum; c++) {
    html.push('<td width="' + tdWidth + '"  vAlign="' + opt.tdvalign + '" >' + (browser.ie ? domUtils.fillChar : '<br/>') + '</td>')
}

改成:
for (var c = 0; c < colsNum; c++) {
html.push('<td style="border:1px solid #ccc;" width="' + tdWidth + '"  vAlign="' + opt.tdvalign + '" >' + (browser.ie ? domUtils.fillChar : '<br/>') + '</td>')
}
不同的版本的代碼可能略微有點不同。
(2). ueditor.all.js文件中找到:
table.setAttribute("data-sort", cmd == "enablesort" ? "sortEnabled" : "sortDisabled");
在這句代碼下面加一行:
table.setAttribute("style", "border-collapse:collapse;");
(3). ueditor.all.js文件中找到:
return '<table><tbody>' + html.join('') + '</tbody></table>'
改為:
return '<table style="border-collapse:collapse;"><tbody>' + html.join('') + '</tbody></table>' 。
此時,再刷新后台,插入一個表格,就有邊框了。
因為改的是ueditor.all.js,所以調用ueditor.all.js才有效,要是調用的ueditor.all.min.js,那么就需要更改ueditor.all.min.js文件了。
這三處代碼弄清楚后,要是你還想擴展一些新的樣式效果也是可以直接在這幾個地方修改就好了。

參考文章:
CSS list-style-type 屬性
百度編輯器ueditor代碼高亮效果前台不顯示的解決方法
百度編輯器ueditor插入一個表格后,在編輯過程中有表格,但是保存后,在前台網頁中沒有邊框,也沒有顏色



免責聲明!

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



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