富文字編輯器Quill(二)上傳圖片與視訊

摘要： image與video在Quill formats中屬於Embeds，要在富文字中插入圖片或者視訊需要使用insertEmbed api。 insertEmbed insertEmbed(index: Number, type: String, value: any, s...

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>