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>
富文本编辑器Quill(二)上传图片与视频
原文地址：https://www.cnblogs.com/linxiyue/p/10305047.html