百度編輯器(UEditor)入門使用手冊

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

一、下載UEditor編輯器

百度編輯器UEditor PHP版 

百度編輯器UEditor .NET版 

百度編輯器UEditor JSP版 

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

二、精簡UEditor編輯器

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

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)頁中引入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的配置文件，首先對路徑進(jìn)行配置。

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

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

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

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

使用定制版的童鞋可以下載一個(gè)完整版，里面的配置文件比較完整，有些東西可以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>

還有一個(gè)問題，當(dāng)再次使用UEditor編輯之前提交到數(shù)據(jù)庫的代碼時(shí)，編輯器會自動(dòng)過濾掉代碼中的很多標(biāo)簽，今天在微博上@了一下UEditor團(tuán)隊(duì)，UEditor團(tuán)隊(duì)的人說需要先轉(zhuǎn)義。

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

12下一頁>

UEditor 1.4.3.4 官方版

• 軟件性質(zhì)：國產(chǎn)軟件
• 授權(quán)方式：免費(fèi)版
• 軟件語言：簡體中文
• 軟件大�。�9536 KB
• 下載次數(shù)：2049 次
• 更新時(shí)間：2019/4/9 0:46:02
• 運(yùn)行平臺：WinXP,Win7...
• 軟件描述：UEditor是由百度 Web前端研發(fā)部開發(fā)的所見即所得的富文本在線編輯器，具有... [立即下載]