VUE实现集成UEditor百度富文本编辑器

最新推荐文章于 2022-12-06 22:18:00 发布

置顶

枫林潜行

最新推荐文章于 2022-12-06 22:18:00 发布

阅读量706

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34161020/article/details/90443281

本文档介绍了如何在Vue项目中集成百度的UEditor富文本编辑器。首先，从指定地址下载并重命名放置到静态资源目录。接着，配置ueditor.config.js文件，设置UEDITOR_HOME_URL。然后，在main.js中引入组件，并在/src/components/创建ue.vue作为编辑器组件。最后，可在其他页面引用该组件，成功实现富文本编辑器的集成。

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

1.下载地址:http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-php
2.下载完文件重新起名为UE，并放入到 /static/下。文档结构如下：

3.配置

打开 ueditor.config.js 找到 window.UEDITOR_HOME_UR 将它设置为：
```
 window.UEDITOR_HOME_URL = "/static/ue/";		
```
其他的配置参数，请参考官方文档进行配置：http://fex.baidu.com/ueditor/

集成到 UEditor 编辑器到我们的系统中，打开 /src/main.js 文件，在合适位置插入下面的代码：

 	// 配置百度编辑器
 	
 	import '../static/ue/ueditor.config.js'
 	
 	import '../static/ue/ueditor.all.min.js'
 	
 	import '../static/ue/lang/zh-cn/zh-cn.js'
 	
 	import '../static/ue/ueditor.parse.min.js'

创建 UEditor VUE 组件

在 /src/components/ 目录下创建 ue.vue 文件，作为我们的编辑器组件文件。

	<template>
		<div>
			<script id="editor" type="text/plain"></script>
		</div>
	</template>
	
	<script>
		export default {
     
     
			name:

最低0.47元/天解锁文章

200万优质内容无限畅学