vue使用百度富文本編輯器（ueditor）
前言：
最近項(xiàng)目中用到ueditor，但從來(lái)沒(méi)有在vue上使用過(guò)，于是就簡(jiǎn)單嘗試，但是始終不成功。搜索了幾乎所有博客，但是基本都是從一個(gè)地方copy復(fù)制的?。?！
關(guān)鍵還都是錯(cuò)的，我的媽呀，真的受不了，被誤導(dǎo)了好久，最后總算搞出來(lái)了。
個(gè)人覺(jué)得博客是知識(shí)的傳播載體，書寫的時(shí)候還是應(yīng)該帶有責(zé)任感，而不是只會(huì)機(jī)械的復(fù)制粘貼，自己會(huì)的就是會(huì)，不會(huì)的就是不會(huì)，不應(yīng)該做“南郭先生”。衷心的希望編輯博客的同學(xué)，在書寫個(gè)人技術(shù)博客時(shí)還是負(fù)點(diǎn)責(zé)任，畢竟你是一個(gè)導(dǎo)師的角色。
言歸正傳，因?yàn)檫@個(gè)功能很簡(jiǎn)單，但被誤導(dǎo)好久所以有點(diǎn)火大，好吧繼續(xù)講安裝和使用的操作。
操作大綱：
1.進(jìn)入官網(wǎng)或者github下載源碼
2.使用grunt編譯
3.引入public/static文件夾
4.安裝vue-ueditor-wrap
5.組件中引入，自定義組件
1.進(jìn)入官網(wǎng)或者github下載源碼
地址：https://github.com/fex-team/ueditor
2.使用grunt編譯
grunt是什么
全局安裝grunt
npm install -g grunt-cli
1
將下載好的ueditor壓縮包解壓（我下載的zip格式）；
使用vscode（或其他）開發(fā)工具進(jìn)入目錄，輸入命令npm install 安裝依賴；
依賴安裝好以后，使用命令grunt default進(jìn)行編譯；
進(jìn)入編譯后生成的dist目錄中復(fù)制utf8-php目錄到vue項(xiàng)目的static/public 目錄中，修改utf8-php目錄名為UEditor。
注意：
在vue-cli2中我們放入的是static文件夾，設(shè)置UEDITOR_HOME_URL為/static/UEditor/；
在vue-cli3中放入的是public文件夾，設(shè)置UEDITOR_HOME_URL為/UEditor/
例如：
4.安裝vue-ueditor-wrap
npm install vue-ueditor-wrap
1
5.組件中引入，自定義組件
引入組件：
<vue-ueditor-wrap v-model="dataStr" :config="myConfig"></vue-ueditor-wrap>
import VueUeditorWrap from 'vue-ueditor-wrap'
components: {
VueUeditorWrap
}
參數(shù)配置：
data () {
return {
dataStr: '我是渲染字段',
myConfig: {
// 編輯器不自動(dòng)被內(nèi)容撐高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 400,
// 初始容器寬度
initialFrameWidth: '100%',
// 上傳文件接口（這個(gè)地址是我為了方便各位體驗(yàn)文件上傳功能搭建的臨時(shí)接口，請(qǐng)勿在生產(chǎn)環(huán)境使用?。。。? serverUrl: 'http://127.0.0.1:8080/ueditor',
// UEditor 資源文件的存放路徑，如果你使用的是 vue-cli 生成的項(xiàng)目，通常不需要設(shè)置該選項(xiàng)，vue-ueditor-wrap 會(huì)自動(dòng)處理常見(jiàn)的情況，如果需要特殊配置，參考下方的常見(jiàn)問(wèn)題2
UEDITOR_HOME_URL: '/static/UEditor/'
}
}
}
————————————————
版權(quán)聲明：本文為CSDN博主「清風(fēng)細(xì)雨_林木木」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_35773751/article/details/124258604
