ueditor修改后的包,可直接下載解壓使用
pan.baidu.com/s/1s8jdkOeANUUeGOg_yHX3rA?pwd=me3b
1.解壓后把 UEditor 文件放到public下
2.安裝vue-ueditor-wrap
npm i vue-ueditor-wrap
3.在main.js中引入并使用
import VueUeditorWrap from 'vue-ueditor-wrap'
createApp(App).use(VueUeditorWrap).mount('#app')
4.直接使用
<vue-ueditor-wrap v-model="contents" :config="myConfig"></vue-ueditor-wrap>
//↑html ↓js
data() {
return {
contents: "你個老六",
myConfig: {
//zIndex: 9999,//有層級問題可以設(shè)置zIndex
autoHeightEnabled: false, // 編輯器不自動被內(nèi)容撐高
initialFrameHeight: 420, // 初始容器高度
initialFrameWidth: '100%', // 初始容器寬度
UEDITOR_HOME_URL: '/UEditor/',
// 上傳文件接口(這個地址是我為了方便各位體驗文件上傳功能搭建的臨時接口,請勿在生產(chǎn)環(huán)境使用?谢ΑV瞪础I簟)
serverUrl: `/api/v1/Upload`//后端配置的上傳接口(接口返回配置只需要一個oobj步做,不需要外層內(nèi)容)
}
}
},
到這里前端就可以直接使用了
5.如果出現(xiàn)not import language file報錯
原因:沒有引入語言文件卡乾,加入下面引入
<script type="text/javascript" src="../ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
6.工具欄(按鈕欄)取消 浮動
//ueditor.config.js修改如下
autoFloatEnabled : false,
//后端配置請參考原文
blog.csdn.net/lhkuxia/article/details/128882477