[TOC] #### 1. ueditor 介紹 --- ueditor 官方文檔：[http://fex.baidu.com/ueditor](http://fex.baidu.com/ueditor) UEditor 官方不再積極維護(hù)，但作者會(huì)持續(xù)優(yōu)化和修復(fù)UEditor 停更帶來(lái)的一些問(wèn)題 UEditor 依然是國(guó)內(nèi)使用頻率極高的富文本編輯器，基于 html 的項(xiàng)目使用的非常多，對(duì)于 vue 項(xiàng)目使用的是其他編輯器 UEditor 是由百度「FEX前端研發(fā)團(tuán)隊(duì)」開(kāi)發(fā)的所見(jiàn)即所得富文本 web 編輯器，具有輕量，可定制，注重用戶(hù)體驗(yàn)等特點(diǎn)，開(kāi)源基于MIT協(xié)議，允許自由使用和修改代碼 #### 2. ueditor 下載 --- 進(jìn)入標(biāo)簽列表，點(diǎn)擊 `Downloads`，Github 地址：[https://github.com/fex-team/ueditor/tags](https://github.com/fex-team/ueditor/tags)  選擇自己需要的版本即可，因?yàn)槭鞘褂?PHP，所以我會(huì)選擇 PHP 版本的  #### 3. ueditor 使用 --- 下面是 ueditor 最簡(jiǎn)單的使用示例： 溫馨提示：使用上傳文件功能必須部署在 web 服務(wù)器下，并且能正常訪(fǎng)問(wèn)后端 ```html <!-- 加載編輯器的容器 --> <script id="container" name="content" type="text/plain">這里寫(xiě)你的初始化內(nèi)容</script> <!-- 配置文件 --> <script type="text/javascript" src="ueditor/ueditor.config.js"></script> <!-- 編輯器源碼文件 --> <script type="text/javascript" src="ueditor/ueditor.all.js"></script> <!-- 建議手動(dòng)加在語(yǔ)言，避免在ie下有時(shí)因?yàn)榧虞d語(yǔ)言失敗導(dǎo)致編輯器加載失敗 --> <!-- 這里加載的語(yǔ)言文件會(huì)覆蓋你在配置項(xiàng)目里添加的語(yǔ)言類(lèi)型 --> <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script> <!-- 實(shí)例化編輯器 --> <script type="text/javascript"> const ue = UE.getEditor('container') </script> ``` 加載編輯器的容器也可以使用 textarea 標(biāo)簽 ```html <textarea name="content" id="container">這里寫(xiě)你的初始化內(nèi)容</textarea> ``` 設(shè)置和讀取編輯器內(nèi)容 ```javascript //對(duì)編輯器的操作最好在編輯器ready之后再做 ue.ready(function () { //設(shè)置編輯器的內(nèi)容 ue.setContent('hello'); //獲取html內(nèi)容,返回: <p>hello</p> const html = ue.getContent(); //獲取純文本內(nèi)容,返回: hello const txt = ue.getContentTxt(); }); ``` #### 4. 前端配置項(xiàng)說(shuō)明 --- ueditor 的配置項(xiàng)分類(lèi)兩大類(lèi)：**前端配置項(xiàng)** 和 **后端配置項(xiàng)** 修改前端配置項(xiàng)的兩種方式： 1、修改ueditor.config.js 2、編輯器實(shí)例化的時(shí)候傳入配置參數(shù) ```javascript const ue = UE.getEditor('container', { // 自定義參數(shù) }) ``` #### 5. 定制工具欄圖標(biāo) --- UEditor 工具欄上的按鈕并不是都能用到的，只需要通過(guò)修改配置項(xiàng)就可以自定義工具欄上的按鈕列表 自定義工具欄按鈕的兩個(gè)方法： 1、修改 ueditor.config.js 中的 toolbars 2、實(shí)例化編輯器的時(shí)候傳入 toolbars 參數(shù) 【推薦方式】 完整的工具欄按鈕列表查看官方文檔：[http://fex.baidu.com/ueditor/#start-toolbar](http://fex.baidu.com/ueditor/#start-toolbar) ```javascript const ue = UE.getEditor('container', { // 工具欄 toolbars: [ // 第一行 ["fullscreen", "source", "undo", "redo", "bold"], // 第二行(配置項(xiàng)里用豎線(xiàn) "|" 代表分割線(xiàn)) ["fontborder", "strikethrough", "|", "superscript", "subscript"] ] }) ``` 我一般會(huì)將下面這些工具欄按鈕隱藏掉 ```javascript [ 'anchor', //錨點(diǎn) 'insertvideo', //視頻 'music', //音樂(lè) 'attachment', //附件 'map', //Baidu地圖 'gmap', //Google地圖 'webapp', //百度應(yīng)用 'template', //模板 ] ``` #### 6. 后端配置項(xiàng)說(shuō)明 --- 修改上傳文件相關(guān)配置項(xiàng)：`ueditor/php/config.json` 比如上傳大小限制、文件保存路徑格式等配置，完整配置查看該配置文件即可，示例： ```json { // 圖片保存路徑格式 "imagePathFormat": "", // 文件保存路徑格式 "filePathFormat": "" } ``` #### 7. 常見(jiàn)問(wèn)題解決方案 --- **后臺(tái)配置項(xiàng)返回格式出錯(cuò)，上傳功能將不能正常使用 ！** 如果 ueditor 靜態(tài)資源目錄的訪(fǎng)問(wèn)地址是 `http://127.0.0.1:5500/ueditor`， 那么 `http://127.0.0.1:5500/ueditor/php/controller.php` 需要能訪(fǎng)問(wèn)，不能訪(fǎng)問(wèn)時(shí)會(huì)出現(xiàn)下圖錯(cuò)誤