UEditor是由百度WEB前端研發(fā)部開發(fā)的所見即所得的開源富文本編纂器，具有輕量、可定制、用戶體驗(yàn)優(yōu)秀等特點(diǎn)。開源基于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)殚_發(fā)時(shí)間不長(zhǎng)，還需慢慢完善。