当前位置：首页 > news >正文

vue使用百度富文本编辑器

news 2025/8/3 17:16:40

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、上传图片报错，说什么未配置

在修改为自己的接口即可使用