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

最新推荐文章于 2025-04-14 14:10:12 发布

Coding_Jia

最新推荐文章于 2025-04-14 14:10:12 发布

阅读量1w

点赞数

分类专栏： vue-js 富文本编辑器 UEditor

本文链接：https://blog.youkuaiyun.com/Coding_Jia/article/details/81410308

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近开发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.par