vue2.x集成百度UEditor富文本编辑器方法

Vue2.x集成UEditor富文本编辑器步骤解析

最新推荐文章于 2025-09-10 00:33:24 发布

原创

最新推荐文章于 2025-09-10 00:33:24 发布 · 1w 阅读

15 ·

CC 4.0 BY-SA版权

本文介绍了在Vue2.x项目中集成百度UEditor的详细过程，包括将UEditor源码放入static文件夹，配置main.js，创建公共组件UE.vue，调整ueditor.config.js的工具栏设置，指定编辑器资源根目录，处理非一级目录的相对路径，以及解决后台配置项错误以启用上传功能。集成完成后，可在其他组件中便捷地使用UEditor并获取编辑内容。

最近开发vue项目过程中，由于产品需要在项目中添加富文本编辑器，也在npm上找了几个基于vue开发的富文本编辑器，但是对兼容性比较高，不能兼容到IE9，10。所以最后决定使用百度UEditor。然后又是各种找如何集成到vue中。好记性不如烂笔头，记录下来以便以后需要的时候可以直接用。

1.首先下载UEditor源码，将整个文件放到static文件夹中这里写图片描述
2.然后将UEditor集成到项目中去。
找到src/main.js，在main.js中

import '../static/ueditor/ueditor.config.js'
import '../static/ueditor/ueditor.all.min.js'
import '../static/ueditor/lang/zh-cn/zh-cn.js'　　　
import '../static/ueditor/ueditor.parse.min.js'

3.在src/components文件夹下创建公共组件UE.vue文件，作为编辑器组件