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