🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
**1、前端:下载富文本插件** npm install vue-ueditor-wrap@3.x -S 或 yarn add vue-ueditor-wrap@3.x ***** **2、在main.js 挂载实例** // 引入富文本组件 import vueUeditorWrap from 'vue-ueditor-wrap'; // 创建一个vue应用实例 const app = createApp(App); // 挂载到vue应用实例 app.use(vueUeditorWrap); app.mount('#app'); ***** **3、下载UEditor富文本静态资源,放在public文件下;并配置相关信息** **Gitee下载静态资源文件,dist-min:代表压缩版 dist:代表非压缩版,推荐下载dist非压缩版,便于修改源码信息** 1、下载静态资源包,推荐dist文件下载 ![](https://img.kancloud.cn/48/6e/486e6677fa56771ac859cc2704f3ab6d_933x570.png) ![](https://img.kancloud.cn/ef/9a/ef9a7318ec9695f871405217731f44c6_1245x638.png) 2、将下载完成的静态资源包,放入如我们前端的工程下public文件夹下 ![](https://img.kancloud.cn/e6/f8/e6f8c48348697bb548c0118fd4a83241_396x413.png) 3、修改ueditor.config.js文件,指定静态资源路径 ![](https://img.kancloud.cn/75/f4/75f4b632ec9bb34420f86bdbdcb28c9d_1087x409.png) 4、修改ueditor.all.js文件 ![](https://img.kancloud.cn/a3/ab/a3ab693d6ce21d97e7dac1c552236afd_1362x437.png) 5、添加前端环境变量参数 ![](https://img.kancloud.cn/8f/85/8f85b93638a6bd6d23d401798c4442f2_1129x552.png) ![](https://img.kancloud.cn/9b/fc/9bfc0497f31ddd398769328ea63b667b_1168x329.png) ***** **4、vue业务页面使用** ![](https://img.kancloud.cn/4c/51/4c513ad9cd2383348880279728688b7a_465x308.png) ![](https://img.kancloud.cn/08/af/08afe5451570d6a5ceb5fa7e56d8acbe_961x383.png) ![](https://img.kancloud.cn/48/39/4839af6e75bb96638ec016743fbd46a5_710x483.png) ***** **5、配置拦截器白名单放行** **注意:配置系统拦截器白名单放行,名字不可修改!!!** ***** UEditor富文本上传接口 /ueditorAction/** UEditor富文本资料回显接口 /ueditorShowFile/** ***** ![](https://img.kancloud.cn/4d/2a/4d2a01c4d60e95a36cb3e1055c3b5eb2_862x429.png)