ueditor(vue-ueditor-wrap)集成秀米全过程以及遇到的问题

本文介绍了如何在Vue项目中使用vue-ueditor-wrap集成ueditor,并详细记录了集成秀米UI的过程,包括下载资源、引入配置、修改文件以及解决路径、遮盖和uParse报错等问题的步骤。同时提供了相关参考资料链接。
摘要由CSDN通过智能技术生成

1.ueditor(vue-ueditor-wrap)集成秀米踩坑记录
链接如下:
https://www.jianshu.com/p/af5e935ea506

第一选择肯定是打开ueditor官网地址看下文档吧

image
  ??????

然后去github https://github.com/fex-team/ueditor,哦,已经放弃治疗了

image
  先按照教 readme 试试水,下载1.5.0版本代码,结合某些古代的博客,先main.js引入这个,然后引入那个。问题来了,代码中没找到这些文件,脸更黑了。

呵,好吧,由于水平太菜,接着百度,幸运的是,找到一颗好乘凉的大树 vue-ueditor-wrap,有大佬封装了,看着大佬代码开整。

干货

安装使用 vue-ueditor-wrap
  npm i vue-ueditor-wrap 或者 yarn add vue-ueditor-wrap

下载 UEditor 资源文件
  我是用的这个大神的,https://github.com/HaoChuan9421/vue-ueditor-wrap-demo,直接拿到他的static下的UEditor文件夹(1.4.4.3),有dmeo可以参考可以省好多力气

当然你也可以去vue-ueditor-wrap这个大神的git中下载

下载完成以后,将UEditor文件夹放在public文件夹下(因为我是vue-cli4版本,其他版本根据情况放在static中还是public中)

引入 UEditor 资源
  在main.js中依次引入

  // 要按顺序
  import '../public/UEditor/ueditor.config.js'
  import '../public/UEditor/ueditor.all.min.js'
  import '../public/UEditor/lang/zh-cn/zh-cn.js'
  import '../public/UEditor/ueditor.parse.min.js'
  //上面提到的 1.5.0版
Vue-Ueditor-Wrap是一个用于Vue.js环境下的UEditor组件封装,它可以帮助你在Vue应用中轻松集成富文本编辑器Ueditor。如果你想将秀米图片上传并存储到腾讯云的OSS(Object Storage Service),你需要按照以下步骤操作: 1. **安装依赖**:首先,在你的Vue项目中安装`vue-ueditor`和`qiniu-sdk`,分别用于UEditor和Qiniu(腾讯云对象存储服务的SDK): ```bash npm install vue-ueditor qiniu-js-sdk ``` 2. **配置UEditor**:在Vue组件中引入并配置Ueditor,添加文件上传相关的插件,例如`imageManager`和自定义的上传处理器: ```javascript import UEditor from 'vue-ueditor' import Qiniu from 'qiniu-js-sdk' Vue.component('vue-ueditor', UEditor) export default { components: { UEditor, }, data() { return { ue: {}, } }, mounted() { this.ue = new UEditor({ ... // 其他配置项 toolbars: ['fullscreen', 'undo redo | forecolor backcolor fontname fontsize emoticons image | imageManager'], // 添加图片管理工具栏 uploadImageAction: '/api/upload-to-qiniu', // 图片上传接口地址 uploadImageShowBase64: true, // 是否显示base64预览 serverUrl: Qiniu.conf.uploadToken(), // 使用Qiniu提供的uploadToken处理上传 }) // 初始化Qiniu SDK Qiniu.init(Qiniu.conf.ACCESS_KEY, Qiniu.conf.SECRET_KEY) }, } ``` 3. **处理图片上传**:创建一个后端API(如'/api/upload-to-qiniu'),该API应接收用户上传的图片数据,并调用Qiniu SDK将图片上传到OSS。示例代码如下: ```javascript // 后端Node.js服务器示例 (Express) const express = require('express'); const multer = require('multer'); const app = express(); const qiniu = require('qiniu'); app.post('/api/upload-to-qiniu', multer({ fileFilter: checkImageFile }), async (req, res) => { try { const file = req.file; const key = `${Date.now()}_${file.originalname}`; const token = await qiniu.uploadToken(bucketName, key); await qiniu.put(file.buffer, key, token); // 返回新的图片URL到前端 res.json({ url: `http://${bucketName}.qiniucdn.com/${key}` }); } catch (error) { console.error(error); res.status(500).json({ error: 'Upload failed' }); } }); async function checkImageFile(req, file) { if (!file.mimetype.startsWith('image')) { return false; } return true; } app.listen(3000, () => console.log('Server started on port 3000')); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值