富文本编辑器Quill(二)上传图片与视频
2019-01-22 23:19
2859 查看
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 = null delete this.quill }, methods: { initQuill () { const quill = new Quill('#editor', { theme: 'snow', modules: { toolbar: '#toolbar' } }) this.quill = quill this.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>
相关文章推荐
- vue中使用vue-quill-editor富文本编辑器,自定义toolbar,图片上传到七牛
- 上传永久素材(图片,视频)
- IOS 上传图片或视频
- 使用MultipartEntity对文字、图片、视频进行综合上传
- react 中 使用 没有启用图片上传功能的simditor 富文本编辑器
- iOS图片,视频上传&视频内容旋转
- iOS原生api post上传图片,上传视频
- nodejs如何从上传的视频中截取一帧作为预览图片
- 上传视频并转换为flv,抓取第一帧生面图片
- 富文本编辑器三种不同图片上传功能
- 微信小程序-从相册获取图片,视频 使用相机拍照,录像上传+服务器(nodejs版)接收
- 微信公众平台开发[10]-开发模式-高级功能-将图片、视频、音频I内容上传到微信服务器并发送给用户
- 使用MultipartEntity对文字、图片、视频进行综合上传
- 实现图片、音视频文件的上传预览
- fckeditor2.5.1上传图片和视频
- MVC3.0下使用百度富文本编辑器UMEditor1.2.2上传图片
- iOS开发技巧之:iOS 视频图片压缩上传
- c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)
- liferay之TinyMCE(4.0.26)富文本编辑器的使用及本地图片上传的实现
- 百度富文本编辑器UEditor自定义上传图片接口