Vue中部署百度富文本编辑器UEditor及其自带的后端，并加入秀米插件

最新推荐文章于 2024-07-01 10:02:17 发布

对啊我是太阳啊

最新推荐文章于 2024-07-01 10:02:17 发布

阅读量2k

点赞数 2

分类专栏： Vue憨批笔记文章标签：前端 UEditor 网页编辑器秀米 Vue

本文链接：https://blog.csdn.net/qq_42034123/article/details/102781989

版权

本文详细介绍了如何在Vue项目中集成UEditor富文本编辑器，包括前端部署、后端配置，以及如何添加秀米插件。在部署UEditor时，涉及前端安装、配置与后端接口的设置，解决了跨域和资源路径问题。最后，通过引入秀米插件，实现了图文编辑功能，同时处理了远程图片抓取和路径调整的问题。

摘要由CSDN通过智能技术生成

本文使用vue-ueditor-wrap插件将UEditor编辑器嵌入Vue中，实践过程中颇多曲折，以下错误和解决方案都是个人摸索的经历，谨慎模仿。
vue-ueditor-wrap的github地址
 Ueditor官方文档
 秀米插件官方文档

在项目中安装vue-ueditor-wrap：npm i vue-ueditor-wrap -S
下载一个版本的UEditor源码，本文以utf8-jsp为例说明
解压下载的压缩包，并重命名为UEditor，放在项目的static目录下
在main.js文件中全局引入VueUeditorWrap组件并注册：
import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

在需要的页面中放入插件并进行配置：

<!--HTML部分，(将编辑器的文本双向绑定到this.msg上-->
<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>

 //JS部分
data () {
     
   return {
     
	    //测试文字
	    msg:

关注