image與video在Quill formats中屬于Embeds，要在富文本中插入圖片或者視頻需要使用insertEmbed api。

insertEmbed

insertEmbed(index: Number, type: String, value: any, source: String = 'api'): Delta

插入圖片需要位置，內(nèi)容類型以及圖片的url：

quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png')

獲取位置：

const range = quill.getSelection();

上傳圖片

首先toolbar中添加image，還需要一個(gè)隱藏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，點(diǎn)擊時(shí)上傳圖片：

this.quill.getModule("toolbar").addHandler("image", this.uploadImageHandler)

handler:

uploadImageHandler () {const input = document.querySelector('#uploadImg')input.value = ''input.click()},

為input元素添加onchange事件，獲取上傳圖片，上傳服務(wù)器，獲取圖片地址，將地址插入到編輯器中：

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

默認(rèn)的video上傳會(huì)存在一個(gè)問題，上傳后video是放在iframe中的，一般情況下是沒有問題的，但在小程序中使用h5頁面時(shí)，iframe中的域名需要添加到小程序業(yè)務(wù)域名中，否則會(huì)禁止訪問。

更好的解決方法是簡單的添加一個(gè)video元素，而不是iframe，我們需要定制一個(gè)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')};} }

注冊(cè)：

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>

　　

轉(zhuǎn)載于:https://www.cnblogs.com/linxiyue/p/10305047.html

總結(jié)

以上是生活随笔為你收集整理的富文本编辑器Quill(二)上传图片与视频的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。