vue-quill-editor视频上传，图片上传到服务器模块，用视频上传，图片上传到服务器模块，用video
标签替换标签替换iframe
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' // for bubble theme
import {
quillEditor,
Quill
} from 'vue-quill-editor';
import {
container
} from 'quill-video-image-module';
import {
ImageExtend,
QuillWatch
} from 'quill-video-image-module/quill-image-module';
import {
VideoExtend,
QuillVideoWatch
} from 'quill-video-image-module/quill-video-module'
// 引入video模块并注册
import video from 'quill-video-image-module/video'
Quill.register(video, true)
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/VideoExtend', VideoExtend)
export default {
components: {
quillEditor
},
data() {
return {
content: '',
// 富文本框参数设置
editorOption: {
modules: {
ImageExtend: {
loading: true, // 可选参数 是否显示上传进度和提示语
name: 'img', // 图片参数名
size: 2, // 可选参数 图片大小，单位为M，1M = 1024kb
action: 'http://127.0.0.1:5000/upload/img', // 服务器地址, 如果action为空，则采用base64插入图片
// response 为一个函数用来获取服务器返回的具体图片地址
// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
// 则 return res.data.url
response: res => {
return res.data.url;
},
headers: () => {}, // 可选参数 设置请求头部
start: () => {}, // 可选参数 自定义开始上传触发事件
end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
error: () => {}, // 可选参数 自定义网络错误触发的事件
change: () => {}, // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
weixin_38728347
- 粉丝: 4
- 资源: 914
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- ARM Cortex-A(armV7)编程手册V4.0.pdf
- ABB机器人保养总结解析.ppt
- 【超详细图解】菜鸡如何理解双向链表的python代码实现
- 常用网络命令的使用 ipconfig ping ARP FTP Netstat Route Tftp Tracert Telnet nslookup
- 基于单片机控制的DC-DC变换电路
- RS-232接口电路的ESD保护.pdf
- linux下用time(NULL)函数和localtime()获取当前时间的方法
- Openstack用户使用手册.docx
- KUKA KR 30 hA,KR 60 hA机器人产品手册.pdf
- Java programming with JNI
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0