vue 中quill-editor富文本图片和视频上传功能

最新推荐文章于 2024-07-11 17:13:46 发布
最新推荐文章于 2024-07-11 17:13:46 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： nodejs全栈开发 从入门到精通 Vue 文章标签： vue.js 音视频 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35946021/article/details/130112272
版权
本文介绍了如何在Vue项目中使用quill-editor富文本编辑器，解决其默认图片转base64及视频只能通过链接插入的问题。通过自定义上传视频弹窗和修改iframe为video标签，实现图片和视频上传功能。关键点包括设置全局上传接口变量uploadFileURL，处理返回的文件地址，并引入video.js以转换iframe。最终，通过组件化方式实现富文本内容的获取。
摘要由CSDN通过智能技术生成

quill-editor富文本对于新手来说是个很友好的富文本编辑器。但是里面的图片上传和视频上传功能在实际的工作中不能满足要求。

1.原生的图片上传会转换成bas64格式，

2.视频上传只是个输入框，要有视频链接了才能添加视频；而且视频标签是iframe标签，并不是video标签。

现在主要解决以上这两个问题

 加了个自定义上传视频弹出框，既可以用已经有的在线视频地址，也可以上传本地视频

富文本组件

要动的地方就是要设置个全局上传文件接口的变量 uploadFileURL。

以及uploadvideoSuccess和uploadSuccess方法里图片返回的格式，我是code==200就直接拿dat

了解本专栏 订阅专栏 解锁全文
三线码工
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
【VUE+Element】vue-quill-editor的使用，上传图片+音频+视频+自定义上传方式
BMG-Princess
07-02 6594
效果： 1、引入vue-quill-editor cnpm install vue-quill-editor 2、使用vue-quill-editor template： <!-- 上传组件辅助--> <el-upload class="avatar-uploader-editor" :action="serverUrl" name="img" :headers="header" :show-file-list="false" :on.
Vue项目使用quill富文本编辑器实现图片视频上传到服务端
记性不好，写作只为记录，下次直接搬。
06-30 2110
quill富文本编辑器实现图片,视频上传到服务端
vue-quill-editor富文本编辑器：自己实现图片上传功能和图片粘贴上传
最新发布
weixin_66996746的博客
07-11 397
【代码】vue-quill-editor富文本编辑器：自己实现图片上传功能和图片粘贴上传。
Vue +vue-quill-editor+ Element UI使用富文本编辑器，上传图片，上传视频
Memory_888的博客
12-30 4571
vue2+vue-quill-editor+elementUI使用富文本编辑 修改字体字号、工具栏文字提醒、自定义上传图片、图片拖拽及放大和缩小
vue2使用富文本编辑器vue-quill-editor（自定义上传视频）
qq_63026743的博客
07-29 4524
1. 安装vue-quill-editor。6. 在vue.config.js文件中引入。2. 全局引入在main.js 中写入。4. 更改插入图片大小、 安装。5. main.js引入。7. 在页面中显示样式。
vue-quill-editor 富文本编辑器（可上传视频图片），组件挂载的方式实现
qq_30272167的博客
04-02 1478
vue-quill-editor 富文本编辑器（可上传视频图品），组件挂载的方式实现
vue+quill+element-ui实现视频、图片上传及缩放保姆级教程，轻松使用富文本
abei0518的博客
02-02 1886
quill富文本保姆教程，本地视频上传、图片及图片缩放，富文本光标丢失问题
vue-quill-editor视频上传，图片上传到服务器模块，用video标签替换iframe
01-08
quill-video-image-module 介绍 quill视频上传，图片上传到服务器模块，用video标签替换iframe 安装教程 cnpm i vue-quill-editor cnpm i quill cnpm i quill-video-image-module 使用说明 import 'quill/dist/quill.core.css' // import styles import 'quill/dist/quill.snow.css' // for snow theme import 'quill/dist/quill.bubble.css' // fo
vue-quill-editor富文本--图片上传服务器
触不到的颜色是否叫彩虹的博客
08-04 160
组件代码 <template> <div> <quill-editor v-model="content" ref="quill" :options="editorOption" class="editor"> </quill-editor> <input type="file" @change="onEditorChange" id="upload" style="display:none;" /> </div> &l
vue-quill-editor 富文本编辑器上传视频
热门推荐
且听风吟的博客
07-05 1万+
vue-quill-editor 富文本编辑器上传视频
详解vue中使用vue-quill-editor富文本小结（图片上传）
12-11
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html...
vue quill editor 使用富文本添加上传音频功能
10-15
vue-quill-editor 是vue项目中常用的富文本插件，其功能能满足大部分的项目需求。这篇文章主要介绍了vue-quill-editor 富文本添加上传音频功能,需要的朋友可以参考下
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
vue3.0 vue-quill-editor.rar
09-19
总的来说，Vue3.0 + Vue-Quill-Editor的组合为开发者提供了强大的富文本编辑功能，结合Vue CLI 3的快速开发能力，可以高效地构建出具有图片上传和尺寸调整功能的文本编辑器应用。在实际操作中，需注意版本兼容性、...
vue-quill-editor 上传视频
qq_36698013的博客
09-30 8392
项目需要，看了很多博客，都不太合适，于是东拼西凑的做了这个功能 使用插件： vue-quill-editor quill-image-extend-module BootstrapVue axios 请自行 install 和 import 先看看效果吧 下面就是代码: &amp;lt;template&amp;gt; &amp;lt;!-- bidirectional data binding（双向数据绑定） ...
quill-editor实现自定义上传视频和图片到服务器。quill-image-resize-module的实现图片的缩放，以及在小程序和uni-app富文本解析的解决方案
qq_39050445的博客
10-24 4027
最近在用uni-app写跨端的小程序APP应用。其中有富文本的需求，后台使用的vue-cli3+elementUI。vue做技术栈的话还是选择quill-editor比较多。 quill-editor上传图片和视频到服务器 quill-editor默认的图片是base64文件，一般来说，我们都需要保存至自己的服务器或者OSS。 quill-editor上传到服务器的关键是对quill-edi...
vue-quill-editor上传视频，video替换iframe标签
imkaifan的博客
04-26 2319
问题： vue-quill-editor上传视频跟vue-quill-editor上传图片是差不多的。 不知道如何上传图片可以去看：vue-quill-editor上传图片 解决完之后效果图： 解决思路： 官网提供了quill-image-extend-module模块专门处理图片上传问题。同时可以用来上传图片。思路很简单就是：劫持原来的视频上传事件，然后上传到服务器，服务器返回一个图片链接，我再给插进去。 但是有一个问题： 插入的时候命名选择的是插入一个video标签，但是结果确实一个iframe标签
vue-quill-editor富文本展示图片
01-17
你可以使用vue-quill-editor来展示富文本中的图片。默认情况下，vue-quill-editor会将图片转换为base64编码。以下是一个示例代码，演示了如何在vue-quill-editor中展示图片： ```vue <template> <div> <quill-editor v-model="content" :options="editorOptions"></quill-editor> <div v-html="content"></div> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data() { return { content: '<p><img src="data:image/png;base64,iVBORw0KG..."></p>', editorOptions: { // 设置其他的编辑器选项 } } } } </script> ``` 在上面的代码中，我们使用了vue-quill-editor组件，并将富文本内容绑定到`content`变量上。然后，我们使用`v-html`指令将`content`变量中的内容渲染为HTML，从而展示富文本中的图片。 请注意，上述代码中的`<img>`标签中的`src`属性是一个base64编码的图片示例。你需要将其替换为你自己的图片路径或base64编码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三线码工

码字不易，有钱打赏，没打钱点赞

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值