歡迎來(lái)到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

“互聯(lián)網(wǎng)颶風(fēng)”席卷影業(yè) “內(nèi)容為王”無(wú)可取代

發(fā)布時(shí)間:2015-04-24 文章來(lái)源:  瀏覽次數(shù):3368

UEditor是由百度WEB前端研發(fā)部開(kāi)發(fā)的所見(jiàn)即所得的開(kāi)源富文本編纂器,具有輕量、可定制、用戶體驗(yàn)優(yōu)秀等特點(diǎn)。開(kāi)源基于BSD協(xié)議,所有源代碼在協(xié)議答應(yīng)范圍內(nèi)可自由修改和使用。


一、下載UEditor編纂器

在下載頻道可以下載到最新版本的UEditor


UEditor的下載方式分為兩種,完整下載與定制下載,完整下載提供UTF-8與GBK兩種編碼的版本,定制下載目前只有UTF-8編碼,推薦使用定制下載,按需求定制,假如程序不是UTF-8編碼,可以使用EditPlus等工具將壓縮包里所有的HTML及JS文件轉(zhuǎn)碼,記得同時(shí)修改HTML文件中的charset=utf-8。


二、精簡(jiǎn)UEditor編纂器


完整版的相關(guān)文檔與示例頁(yè)面較多,可以自行研究一下。


index.html是所定制的UEditor編纂器的示例文件,刪除之。


editor.js與editor.min.js內(nèi)容相同,editor.min.js是editor.js的壓縮版,使用時(shí)加載editor.min.js即可,所以editor.js也可以刪除。


三、將UEditor部署到PHP程序上


1.將UEditor的所有文件放在PHP程序的目錄中,這里我把文件放在/ueditor目錄下。


2.在網(wǎng)頁(yè)中引入U(xiǎn)Editor文件


<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor.min.js"></script>
3.在textarea標(biāo)簽下初始化UEditor


<script type="text/javascript">
var editor = new UE.ui.Editor();
textarea:'name'; //與textarea的name值保持一致
editor.render('name');
</script>
四、配置UEditor編纂器


editor_config.js是UEditor的配置文件,首先對(duì)路徑進(jìn)行配置。


修改第27行左右的路徑配置(根據(jù)版本不同可能會(huì)有變動(dòng))


URL = "ueditor/";  //根據(jù)實(shí)際情況配置
保留,OK搞定,UEditor編纂器就能使用了,此時(shí)同樣可以使用POST或者GET接收到提交的數(shù)據(jù)。


editor_config.js里還有良多常用的配置項(xiàng)目,好比編纂器初始內(nèi)容、編纂器高度等等,需要配置時(shí)只需去掉該行代碼前面的注釋符號(hào)//即可。


使用定制版的童鞋可以下載一個(gè)完整版,里面的配置文件比較完整,有些東西可以COPY過(guò)來(lái)。


五、UEditor代碼高亮


UEditor代碼高亮使用了第三方的高亮JS組件 – SyntaxHighlighter,在測(cè)試的過(guò)程中題目不少,使用UEditor編纂器“插入代碼”功能插入代碼并提交到數(shù)據(jù)庫(kù)后,在顯示頁(yè)面代碼是不會(huì)高亮顯示的,需要在該頁(yè)面加載一下JS和CSS文件。


<script type="text/javascript" src="ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" />
<script>
SyntaxHighlighter.all() //執(zhí)行代碼高亮
</script>
還有一個(gè)題目,當(dāng)再次使用UEditor編纂之條件交到數(shù)據(jù)庫(kù)的代碼時(shí),編纂器會(huì)自動(dòng)過(guò)濾掉代碼中的良多標(biāo)簽,今天在微博上@了一下UEditor團(tuán)隊(duì),UEditor團(tuán)隊(duì)的人說(shuō)需要先轉(zhuǎn)義。


我在提交至數(shù)據(jù)庫(kù)之前用PHP的htmlspecialchars函數(shù)進(jìn)行轉(zhuǎn)義:


$content = htmlspecialchars($_POST[codeContent]);
輸出頁(yè)面執(zhí)行htmlspecialchars_decode函數(shù)后輸出:


echo htmlspecialchars_decode($Row["content"]);
再查看了官方的文檔,官方推薦把textarea容器更換為script容器


<script type="text/plain" id="content" name="content">
//從數(shù)據(jù)庫(kù)中掏出的內(nèi)容打印到此處
</script>
此處采用了script標(biāo)簽作為編纂器容器對(duì)象,并設(shè)置了其類型是純文本,從而在避免了標(biāo)簽內(nèi)部JS代碼執(zhí)行的同時(shí)解決了使用傳統(tǒng)的textarea標(biāo)簽作為容器所帶來(lái)的一次額外轉(zhuǎn)碼題目,我同時(shí)使用了轉(zhuǎn)義和更換textarea容器的方式。


簡(jiǎn)樸測(cè)試了HTML、PHP、JAVASCRIPT和C++代碼,暫時(shí)沒(méi)發(fā)現(xiàn)題目。


總體來(lái)說(shuō),UEditor是一個(gè)很不錯(cuò)的富文本編纂器,但是因?yàn)殚_(kāi)發(fā)時(shí)間不長(zhǎng),還需慢慢完善。

上一條:騰訊QQ將投入10億資源...

下一條:博覽安全圈第四期;雅虎2...