广州网站运营专注乐云seo,wordpress一键倒入微信,手机网站开发下载,安徽兴罗建设集团网站#x1f525;博客主页#xff1a; 破浪前进 #x1f516;系列专栏#xff1a; Vue、React、PHP ❤️感谢大家点赞#x1f44d;收藏⭐评论✍️ 1、下载UEditor
链接已放到文章中了
2、上传到项目目录中 一般上传到public下#xff0c;方便到时候打包进去#xff0c;以免… 博客主页 破浪前进 系列专栏 Vue、React、PHP ❤️感谢大家点赞收藏⭐评论✍️ 1、下载UEditor
链接已放到文章中了
2、上传到项目目录中 一般上传到public下方便到时候打包进去以免出现线上版本无法使用等问题 3、安装vue-ueditor-wrap最新3.x版本
npm i vue-ueditor-wrapnext
4、在main.js中引入并使用
import VueUeditorWrap from vue-ueditor-wrap
createApp(App).use(VueUeditorWrap).mount(#app)5、使用
templatedivvue-ueditor-wrap v-modelmsg :configmyConfig/vue-ueditor-wrapdiv v-htmlmsg/div/div
/template
script
import { ref } from vue
export default {setup() {let msg ref(h2img src//i2.wp.com/img.baidu.com/hi/jx2/j_0003.gif/Vue UEditor v-model双向绑定/h2)let myConfig {// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 450,// 初始容器宽度initialFrameWidth: 100%,// 上传文件接口serverUrl: /api/upload/file,// UEditor 资源文件的存放路径如果你使用的是 vue-cli 生成的项目通常不需要设置该选项vue-ueditor-wrap 会自动处理常见的情况UEDITOR_HOME_URL: /ueditor/}return {myConfig,msg}}
}
/script6、配置代理否则会报错且无法使用上传图片等功能下篇博客会说的
