1、安装
npm add vue-ueditor-wrap 或者 pnpm add vue-ueditor-wrap 进行安装
2、下载UEditor
官网:ueditor:rich text 富文本编辑器 - GitCode
整理好的:vue-ueditor: 百度编辑器JSP版
因为官方的我没用来,所以我自己找的另外的包
3、把下载好的包放在项目目录下 /public下
4、main.js配置
// main.js
import { createApp } from 'vue';
import VueUeditorWrap from 'vue-ueditor-wrap';
import App from './App.vue';createApp(App).use(VueUeditorWrap).mount('#app');
5、v-model 数据绑定
<vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01" />
import { reactive } from "vue";
const msg = ref("");
const editorConfig = reactive({// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 400,// 初始容器宽度initialFrameWidth: '100%',UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径,可参考常见问题1serverUrl: '/pc/pc/Fileimg/uderto', // 服务端接⼝uploadUrl: '/pc/pc/Fileimg/uderto' + '/kjyl-server-doctor/doctor/file/uploadFile',// enableAutoSave: true, // 开启从草稿箱恢复功能需要⼿动设置固定的 editorId,否则组件会默认随机⼀个,如果页⾯刷新,下次渲染的时候 editorId 会重新随机,// 服务端接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
});
6、上传图片报错,说什么未配置
在修改为自己的接口即可使用