一個(gè)不斷學(xué)習(xí)的前端菜鳥，歡迎指正，別噴。。。
前言
??首先， KB編輯器! ，官網(wǎng)都提莫的沒了。然后得感謝某某某等大佬，因?yàn)榇_實(shí)查了好久的資料，你問我為什么不換個(gè)編輯器，？？？（手動(dòng)問號(hào)），我沒這個(gè)權(quán)力......，業(yè)務(wù)需要，開搞吧（項(xiàng)目是vue-cli4）。
試水
??第一選擇肯定是打開ueditor官網(wǎng)地址看下文檔吧
??？？？？？？
??然后去github https://github.com/fex-team/ueditor，哦，已經(jīng)放棄治療了
??先按照教 readme 試試水，下載1.5.0版本代碼，結(jié)合某些古代的博客，先main.js引入這個(gè)，然后引入那個(gè)。問題來了，代碼中沒找到這些文件，臉更黑了。
??呵，好吧，由于水平太菜，接著百度，幸運(yùn)的是，找到一顆好乘涼的大樹 vue-ueditor-wrap，有大佬封裝了，看著大佬代碼開整。
干貨
- 安裝使用
vue-ueditor-wrap
??npm i vue-ueditor-wrap 或者 yarn add vue-ueditor-wrap
- 下載
UEditor資源文件
??我是用的這個(gè)大神的，https://github.com/HaoChuan9421/vue-ueditor-wrap-demo，直接拿到他的static下的UEditor文件夾(1.4.4.3)，有dmeo可以參考可以省好多力氣
??當(dāng)然你也可以去vue-ueditor-wrap這個(gè)大神的git中下載
??下載完成以后，將UEditor文件夾放在public文件夾下(因?yàn)槲沂莢ue-cli4版本，其他版本根據(jù)情況放在static中還是public中)
- 引入 UEditor 資源
??在main.js中依次引入
// 要按順序
import '../public/UEditor/ueditor.config.js'
import '../public/UEditor/ueditor.all.min.js'
import '../public/UEditor/lang/zh-cn/zh-cn.js'
import '../public/UEditor/ueditor.parse.min.js'
//上面提到的 1.5.0版本找不到的就是這些文件
??這里一定要 注意注意注意 路徑問題
??按照HaoChuan9421這個(gè)大神說，可以不引入，因?yàn)関ue-ueditor-wrap做了處理，但是我用了秀米u(yù)i插件，不引入的話，插件得單獨(dú)處理，我比較懶，所以我就引入了...
- 修改UEditor部分文件
??ueditor.config.js中添加window.UEDITOR_HOME_URL = "/UEditor/"(文件上面注釋中有提示)
??third-party/zeroclipboard/ZeroClipboard中修改以下部分(解決一個(gè)報(bào)錯(cuò)，原因不解釋了，很多博客都有說，如 https://segmentfault.com/a/1190000016966347)
- 在頁面中使用編輯器
<vue-ueditor-wrap ref="editor" v-model="msg" :config="editorConfig" :destroy="true" />
import VueUeditorWrap from 'vue-ueditor-wrap'
components: {
VueUeditorWrap
}，
data() {
return {
msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model雙向綁定 + 坑比編輯器</h2>'，
// ueditor配置
editorConfig: {
autoHeightEnabled: true， // 自動(dòng)變高
autoFloatEnabled: true，
initialContent: '請(qǐng)輸入內(nèi)容'，
autoClearinitialContent: true，
initialFrameWidth: '50%'， // 初始化寬
initialFrameHeight: 200， // 初始化高
BaseUrl: ''，
// 上傳文件接口（這個(gè)地址是我為了方便各位體驗(yàn)文件上傳功能搭建的臨時(shí)接口） - 修改成自己后端地址
serverUrl: 'http://35.201.165.105:8000/controller.php'，
// UEditor 資源文件的存放路徑
UEDITOR_HOME_URL: '/UEditor/' // 重要重要重要重要重要重要重要重要重要 必須配置好路徑!!!
}
}
}
??正常情況下，頁面中應(yīng)該可以顯示編輯器了
??當(dāng)然，如果你報(bào)下面錯(cuò)誤的話，一定要檢查檢查上面各步驟的路徑，說到底，這個(gè)玩意，就是路徑容易出問題，其他倒是沒有什么
下面是使用秀米u(yù)i
- 下載秀米資源
??參考秀米官網(wǎng)文檔
??下載4個(gè)資源文件，放在UEditor文件夾下
- 引入秀米u(yù)i文件
<link rel="stylesheet" href="./UEditor/xiumi-ue-v5.css">
<script type="text/javascript" charset="utf-8" src="./UEditor/xiumi-ue-dialog-v5.js"></script>
??還是那句話，注意注意注意 路徑問題
- 修改
xiumi-ue-dialog-v5文件
??iframeUrl: './UEditor/xiumi-ue-dialog-v5.html'，
??注意路徑......
- 修改
ueditor.config.js
??section:['class'， 'style']，
??此時(shí)，路徑不出意外的話，應(yīng)該是沒有啥問題了
??另外: 圖片上傳、視頻上傳等改成自己服務(wù)器地址，需要后臺(tái)配合修改（改第5步的 serverUrl）
總結(jié)
??注意路徑，放平心態(tài)，對(duì)著文檔和博客啥的開搞就完了
