vue3中使用vue-quill富文本编辑器 重写图片上传功能

已于 2023-05-08 10:32:51 修改
阅读量636 收藏 7
点赞数
文章标签： vue.js javascript 前端
于 2023-05-08 10:21:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43692224/article/details/130522998
版权

最近开发的一个vue3+element-plus的项目，需要用到富文本编辑器，最终选择了VueQuill这一款轻便型的富文本编辑器。

说说遇到的问题：富文本编辑器的图片上传，默认是直接以base64图片保存的，这就出现要是图片很大超出后端的容量限制，保存失败的问题，还有就是图片多了就导致页面加载慢，或者加载不出来使用户体验感很差，所以就想到一个办法，将上传成功的图片路径拼接在富文本编辑器内，就解决了上述所说的问题。接下来就是重写富文本编辑器图片上传的方法，详细代码👇

  1. 引入依赖
    在这里插入图片描述
    2.配置所需工具栏(注意：这块加了图片上传的重置函数在handlers）
    在这里插入图片描述
    3.定义图片上传方法
    在这里插入图片描述
    到这里我想实现的功能就大功告成了～

写文章只是为了记录问题怕久了会忘记，也希望能帮到你 有问题欢迎批评指正😊

妮儿妹
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3中使用vueQuill富文本编辑器详细教程，图片上传-图片压缩
阿Q
07-12 9895
此处用到的模块功能有上传图片，和调整图片缩放，具体可以参考官网，安装后，进行通过Quill.register()注册模块，然后在配置项进行使用。注意：目前版本暂不支持表格，如果需要使用表格模块，需要安装quill@2.0.0-dev.4。在公共组件components中创建QuillEditor文件夹index.vue。vueQuill是支持vue3的富文本编辑器组件，使用简单方便；1. 安装：（在官网有详细的安装教程）;引入封装好的QuillEditor组件。
从零开始Vue3+Element Plus后台管理系统(十三)——富文本编辑器、Markdown编辑器、代码编辑器
immocha的博客
05-22 4284
早就想着要放几个编辑器的Demo到项目中，这也是项目开始就立下的flag。今天专门挑选了几款主流编辑器，包括绕不开的富文本编辑器，码农最爱的markdown编辑器，还有用途相对少的代码编辑器。时间有限的情况下，仅引入4个编辑器到我的vue3项目中，尝试了一下基础功能，以及富文本编辑器上传图片的配置。实践证明使用过程并不复杂，也没有什么坑（也有可能是没有深入使用的缘故），再加上它们的文档都很详尽，还是值得推荐的。
vue-quill-editor上传图片
最新发布
sh11223312的博客
06-07 319
vue-quill-editor上传图片是通过将图片转为base64编码去上传至服务器，当图片较大时，上传服务器参数太长会较慢或者超时。
vue中使用vue-quill-editor并且粘贴直接上传图片
chelly_z的博客
11-02 1244
vue-quill-editor富文本，粘贴图片时默认都是base64格式，比较大，所以就需要传到服务器中
vue-quill-editor 富文本图片、视频上传设置
黑白两客
05-25 1360
<template> <div class="card" style="overflow: hidden; padding-bottom: 10px"> <div class="box"> <div> <div class="box_count"> <div class="box_l"> <FlexLinePI :title="'图文标题'" :d
vue富文本编辑器中上传图片
weixin_42080056的博客
08-07 8241
啊！！！好久没更新了，最近粉丝和访问量见长，正好有童鞋的项目遇到点问题，故出此文， 今天超哥给小伙伴带来的是vue中富文本编辑器上传的问题。 曾经写过一个文档管理的项目，用到最多的就是富文本编辑器。 说说遇到的坑吧：最终的提交结果，后端不要文档流，后端要上传成功返回的路径，不知道正在阅读此文的小伙伴是如何处理的，瞅着挺简单，但写起来还真有点麻烦，在这里以vue-quill-editor为例给...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js ...vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 https://blog.csdn.net/cplvfx/article/details/125557966
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
详解vue中使用vue-quill-editor富文本小结（图片上传）
12-11
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html...
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
Vue使用quill-editor富文本编辑框，并把选择图片变为上传到服务器
青莳的博客
06-02 860
这里是在显示富文本编辑器之前的方法里面，如果页面一打开就有富文本编辑器，可以写在mounted里面，我这里是在新增弹框里面，所以写在新增弹窗弹出之后了。然后把富文本编辑器的选择图片按钮替换为上传到服务器，不做这个的话，默认图片是base64，富文本会非常大。
vue-quill-editor 图片上传处理
热门推荐
且听风吟的博客
09-01 1万+
vue-quill-editor 将图片转为base64编码，当图片比较大时，提交后台时参数过长，导致提交失败。 把富文本内的图片动态上传到服务器，然后把图片加载到富文本编辑器。这样一来，图片标签内只需要存储图片的网络地址。 <template> <div class="quill-editor"> <!-- 图片上传组件辅助--> <el-upload class="avatar-uploader" :action="uploadUrl" n
自定义quill 富文本编辑器上传图片功能
七号程序员的博客
08-25 1086
vue2+quill实现富文本工具栏自定义插入图片功能
vue项目 vue-quill-editor富文本编辑器+图片上传
余白x的博客
08-16 2493
serverUrl
Vue-Quill-Editor + Element 实现富文本自定义上传图片和视频
yuxiangmitu的博客
01-15 4384
图片上传：Vue-Quill-Editor 上传图片默认转换成base64的形式，存储在数据库里会很长，于是使用文件上传服务器的路径来存储。 视频上传：Vue-Quill-Editor 上传视频时输入对应的URL，会转换成 iframe 标签存储，所以不必更改默认设置，只需提供一个视频上传接口（如果需要实现点击直接上传效果，参考图片上传）。
Vue +vue-quill-editor+ Element UI使用富文本编辑器，上传图片，上传视频
Memory_888的博客
12-30 4330
vue2+vue-quill-editor+elementUI使用富文本编辑 修改字体字号、工具栏文字提醒、自定义上传图片、图片拖拽及放大和缩小
vue quill富文本编辑器上传图片遇到的坑
dawang18232123的博客
02-13 1090
在使用quill富文本编辑器上传图片的时候，很多地方都是成功的，但是唯有一处，上传图片总是失败，由此后端的朋友就说可以html标签转换成JSON字符串上传上去，展示的时候在转换回来，即可解决问题。由此，我保持怀疑的心态开始了尝试：首先就是引入html2json依赖。
前端提升生产力系列一（vue3 element-plus 配置json快速生成form表单组件）
weixin_45178716的博客
03-03 2377
个人github仓库地址：https:github.com/aehyok本文讲解代码仓库地址 ：https:github.com/aehyok/vue-… 目前基于dev分支进行开发和测试...
把使用特殊符号功能添加到vue2中vue-quill-editor富文本编辑器里面
04-28
要在vue-quill-editor富文本编辑器中添加特殊符号功能，可以使用Quill.js提供的insertText方法。具体步骤如下： 1. 安装Quill.js ``` npm install quill ``` 2. 在Vue组件中引入Quill.js和vue-quill-editor ```...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值