quill 上传图片和视频 定制

Posted 2023-03-17

参考技术A

pass，待写
网上都是 vue 实现的
感觉有点麻烦
这里通过最简单的 jquery 直接调用 quill 的api 来实现

使用到的 api :
详细用法，参见我的另一篇 ：
quill 的使用方法 包含大部分接口

insertEmbed 向编辑器中插入嵌入式内容，返回一个改变后的Delta对象
index 是当前编辑的焦点位置，type 是 image video 或者其他

获取插入的位置

插入图片地址

需要一个隐藏的 上传input 按钮

可以添加自定义的 函数使用：

触发图片的toolbar

触发input 选择图片

选择图片触发input change 事件,通过里面的ajax 获取 图片 url

粘贴图片：
参考 quill issue
https://github.com/quilljs/quill/blob/develop/modules/clipboard.js#L153

https://github.com/quilljs/quill/issues/137

差不多可以实现的方法：（调用 web 的js 内置方法，读取文件，作为图片对象，然后调用自己的图片函数）

记得一点：一个是绑定 onpaste 事件，第二个是 clipboardData 对象的使用 e.clipboardData.items[index].getAsFile() 即为拿到file 对象

参考 ：
js 文件对象
https://developer.mozilla.org/zh-CN/docs/Web/API/File
js input file
https://developer.mozilla.org/zh-CN/docs/Web/html/Element/input/file
js 粘贴对象
https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent/clipboardData

上传音频参考：
https://luncher.github.io/2018/06/02/Quill%E7%BC%96%E8%BE%91%E5%99%A8%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%92%E4%BB%B6/

富文本编辑器Quill上传图片与视频

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>