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,//有层级问题可以设置zIndex
autoHeightEnabled: false, // 编辑器不自动被内容撑高
initialFrameHeight: 420, // 初始容器高度
initialFrameWidth: '100%', // 初始容器宽度
UEDITOR_HOME_URL: '/UEditor/',
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
serverUrl: `/api/v1/Upload`//后端配置的上传接口(接口返回配置只需要一个oobj,不需要外层内容)
}
}
},
到这里前端就可以直接使用了
5.如果出现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