vue使用百度富文本编辑器

 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 静态资源的根路径，可参考常见问题1
	serverUrl: '/pc/pc/Fileimg/uderto', // 服务端接⼝
	uploadUrl: '/pc/pc/Fileimg/uderto' + '/kjyl-server-doctor/doctor/file/uploadFile',
	// enableAutoSave: true, // 开启从草稿箱恢复功能需要⼿动设置固定的 editorId，否则组件会默认随机⼀个，如果页⾯刷新，下次渲染的时候 editorId 会重新随机，// 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
});

6、上传图片报错，说什么未配置

   在 serverurl:"/pc/common/ueditor"，//服务端接口 修改为自己的接口即可使用