image 与 video 在 Quill formats 中属于 Embeds, 要在富文本中插入图片或者视频需要使用 insertEmbed https://quilljs.com/docs/api/#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>
来源: https://www.cnblogs.com/linxiyue/p/10305047.html