富文本编辑器Quill(二)上传图片与视频
image与video在Quill formats中属于Embeds,要在富文本中插入图片或者视频需要使用insertEmbed api。
insertEmbed
insertEmbed(index: Number, type: String, value: any, source: String = 'api'): Delta
插入图片需要位置,内容类型以及图片的url:
quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png')
获取位置:
const range = quill.getSelection();
上传图片
首先toolbar中添加image,还需要一个隐藏input元素用来上传图片:
<template><div><div id="toolbar"><span class="ql-formats"><button class="ql-image"></button><button class="ql-video"></button></span></div><div id="editor"><p>Hello World!</p><p>Some initial <strong>bold</strong> text</p><p><br></p></div><input id="uploadImg" type="file" style="display:none" accept="image/png, image/jpeg, image/gif" @change="uploadImage"></div>
</template>
为image添加handler,点击时上传图片:
this.quill.getModule("toolbar").addHandler("image", this.uploadImageHandler)
handler:
uploadImageHandler () {const input = document.querySelector('#uploadImg')input.value = ''input.click()},
为input元素添加onchange事件,获取上传图片,上传服务器,获取图片地址,将地址插入到编辑器中:
async uploadImage (event) {const form = new FormData()form.append('upload_file', event.target.files[0])const url = await $.ajax(...) #上传图片 获取地址const addImageRange = this.quill.getSelection()const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)this.quill.insertEmbed(newRange, 'image', url)this.quill.setSelection(1 + newRange)}
全部代码:
<template><div><div id="toolbar"><span class="ql-formats"><button class="ql-image"></button><button class="ql-video"></button></span></div><div id="editor"><p>Hello World!</p><p>Some initial <strong>bold</strong> text</p><p><br></p></div><input id="uploadImg" type="file" style="display:none" accept="image/png, image/jpeg, image/gif" @change="uploadImage"></div>
</template><script>
import Quill from 'quill'export default {name: "QuillEditor",mounted () {this.initQuill()},beforeDestroy () {this.quill = nulldelete this.quill},methods: {initQuill () {const quill = new Quill('#editor', {theme: 'snow',modules: {toolbar: '#toolbar'}})this.quill = quillthis.quill.getModule("toolbar").addHandler("image", this.uploadImageHandler)},uploadImageHandler () {const input = document.querySelector('#uploadImg')input.value = ''input.click()},async uploadImage (event) {const form = new FormData()form.append('upload_file', event.target.files[0])const url = await $.ajax(...)const addImageRange = this.quill.getSelection()const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)this.quill.insertEmbed(newRange, 'image', url)this.quill.setSelection(1 + newRange)}}
}
</script>
上传视频做些少许修改就可以了:
<input id="uploadVideo" type="file" style="display:none" accept="video/*" @change="uploadVideo">
this.quill.getModule("toolbar").addHandler("video", this.uploadVideoHandler)
uploadVideoHandler () {...}
async uploadVideo (event) {...}
定制Video
默认的video上传会存在一个问题,上传后video是放在iframe中的,一般情况下是没有问题的,但在小程序中使用h5页面时,iframe中的域名需要添加到小程序业务域名中,否则会禁止访问。
更好的解决方法是简单的添加一个video元素,而不是iframe,我们需要定制一个Video Embed。
const BlockEmbed = Quill.import('blots/block/embed')
class VideoBlot extends BlockEmbed {static create (value) {let node = super.create()node.setAttribute('src', value.url)node.setAttribute('controls', value.controls)node.setAttribute('width', value.width)node.setAttribute('height', value.height)node.setAttribute('webkit-playsinline', true)node.setAttribute('playsinline', true)node.setAttribute('x5-playsinline', true)return node;}static value (node) {return {url: node.getAttribute('src'),controls: node.getAttribute('controls'),width: node.getAttribute('width'),height: node.getAttribute('height')};}
}
注册:
VideoBlot.blotName = 'simpleVideo'
VideoBlot.tagName = 'video'
Quill.register(VideoBlot)
插入Embed:
this.quill.insertEmbed(newRange, 'simpleVideo', {url,controls: 'controls',width: '100%',height: '100%'})
添加效果:
<video src="...mp4" controls="controls" width="100%" height="100%" webkit-playsinline="true" playsinline="true" x5-playsinline="true"></video>
转载于:https://www.cnblogs.com/linxiyue/p/10305047.html
富文本编辑器Quill(二)上传图片与视频相关推荐
- Flask博客实战 - 集成富文本编辑器Quill
富文本编辑器Quill 为什么需要集成富文本编辑器? 一个博客最主要的功能是什么,那就是写作,如果不能对我们发布的内容进行排版美化,那么我们所发布的内容又有什么意义? 对于阅读者来说也是非常的不友好和 ...
- 现代富文本编辑器Quill的内容渲染机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
- quill富文本编辑器——修改默认图片、视频上传功能
quill富文本编辑器默认的图片上传是将图片地址转换为base64格式,可能会导致字段过长:默认的视频上传是插入iframe标签,与需要的video标签不符合 图片上传 初始化编辑器时重写image上 ...
- 现代化富文本编辑器 Quill Editor
介绍 近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
- 富文本编辑器Quill 介绍及在Vue中的使用方法
在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得. 目前市场上已提供大量集成富文本编辑器的包,Quill 作为其中一个,以简单.易 ...
- 现代富文本编辑器Quill的模块化机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
- quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...
- 【华为云技术分享】现代富文本编辑器Quill的模块化机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
- 两文本一图片android,Android富文本编辑器(二):图文混排以及图片上传处理
对于一个富文本编辑器来说,图文混排是最基本的功能.而从上一篇文章中我们知道图文混排需要使用ImageSpan.下面这段代码摘自我的RichEditText源码: /** * 添加图片 * @param ...
最新文章
- Windows 公共控件库研究
- CVE-2019-0708(BlueKeep)漏洞分析与复现
- 2018蓝桥杯省赛---java---A---7(三体攻击)
- POJ3096Surprising Strings(map)
- 线段树(区间更改,区间查最值)模板
- 1020 月饼 (25分)
- 回溯 皇后 算法笔记_算法笔记-回溯法
- cobbler get-loaders 错误解决方法
- 201计算机基础知识,201年计算机应用基础备考练习题及答案
- SQLAlchemy Connection
- HeidiSQL- csv 表格导入数据到 DB表
- 18家机构批量刷新SOTA!T5 is all you need!
- 接死你(骚扰拦截利器) V2 登录木蚂蚁市场了!速速下载,反击骚扰!
- 什么叫诚实_诚信是什么
- 键盘输入一个整数1~7代表今天周几,再输入间隔天数n,判断n天后是周几
- ubuntu16.04安装GTX-960M nvidia-384驱动
- idea自定义过滤器
- QQ小程序支付 QQ钱包支付 微信支付
- rt1052 usb速率_如何才能赋予RT1052超级视频编解码能力?
- 便利的无线信号传输解决方案