UEditor是由百度WEB前端研發(fā)部開發(fā)的所見即所得的開源富文本編輯器，具有輕量、可定制、用戶體驗優(yōu)秀等特點。開源基于BSD協(xié)議，所有源代碼在協(xié)議允許范圍內可自由修改和使用。最近在開發(fā)程序的時候需要集成一個富文本編輯器，UEditor的UI及UE比CKEditor、KindEditor要好出不少。所以簡單地對UEditor研究了一下，記錄于此。

　　一、下載UEditor編輯器

　　可以在chinaz源碼下載最新版本的百度編輯器：

　　百度編輯器UEditor PHP版 http://down.chinaz.com/soft/30289.htm

　　百度編輯器UEditor .NET版 http://down.chinaz.com/soft/32520.htm

　　百度編輯器UEditor JSP版 http://down.chinaz.com/soft/32521.htm

　　也可在UEditor官方網站：http://ueditor.baidu.com/下載頻道下載到最新版本的UEditor

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

　　二、精簡UEditor編輯器

　　完整版的相關文檔與示例頁面較多，可以自行研究一下，下面為定制版中可以精簡的文件。

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

　　editor.js與editor.min.js內容相同，editor.min.js是editor.js的壓縮版，使用時加載editor.min.js即可，所以editor.js也可以刪除。

　　三、將UEditor部署到PHP程序上

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

　　2.在網頁中引入UEditor文件

<script type="text/javascript" src="ueditor/editor_config.js">script>  
<script type="text/javascript" src="ueditor/editor.min.js">script> 

　　3.在textarea標簽下初始化UEditor

<script type="text/javascript">  
var editor = new UE.ui.Editor();  
textarea:'name'; //與textarea的name值保持一致  
editor.render('name');  
script> 

　　四、配置UEditor編輯器

　　editor_config.js是UEditor的配置文件，首先對路徑進行配置。

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

URL = "ueditor/";  //根據(jù)實際情況配置

　　保存，OK搞定，UEditor編輯器就能使用了，此時同樣可以使用POST或者GET接收到提交的數(shù)據(jù)。

　　editor_config.js里還有很多常用的配置項目，比如編輯器初始內容、編輯器高度等等，需要配置時只需去掉該行代碼前面的注釋符號//即可。

　　使用定制版的童鞋可以下載一個完整版，里面的配置文件比較完整，有些東西可以COPY過來。

　　五、UEditor代碼高亮

　　UEditor代碼高亮使用了第三方的高亮JS組件 – SyntaxHighlighter，在測試的過程中問題不少，使用UEditor編輯器“插入代碼”功能插入代碼并提交到數(shù)據(jù)庫后，在顯示頁面代碼是不會高亮顯示的，需要在該頁面加載一下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> 

　　還有一個問題，當再次使用UEditor編輯之前提交到數(shù)據(jù)庫的代碼時，編輯器會自動過濾掉代碼中的很多標簽，今天在微博上@了一下UEditor團隊，UEditor團隊的人說需要先轉義。

　　我在提交至數(shù)據(jù)庫之前用PHP的htmlspecialchars函數(shù)進行轉義：

$content = htmlspecialchars($_POST[codeContent]);

　　輸出頁面執(zhí)行htmlspecialchars_decode函數(shù)后輸出：

echo htmlspecialchars_decode($Row["content"]);

　　再查看了官方的文檔，官方推薦把textarea容器更換為script容器

<script type="text/plain" id="content" name="content">  
//從數(shù)據(jù)庫中取出的內容打印到此處  
script> 

　　此處采用了script標簽作為編輯器容器對象，并設置了其類型是純文本，從而在避免了標簽內部JS代碼執(zhí)行的同時解決了使用傳統(tǒng)的textarea標簽作為容器所帶來的一次額外轉碼問題，我同時使用了轉義和更換textarea容器的方式。

　　簡單測試了HTML、PHP、JAVASCRIPT和C++代碼，暫時沒發(fā)現(xiàn)問題。

　　總體來說，UEditor是一個很不錯的富文本編輯器，但是由于開發(fā)時間不長，還需慢慢完善。

掃描二維碼手機查看該文章