欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-17 14:38:28
image与video在Quill formats中属于Embeds,要在富文本中插入图片或者视频需要使用insertEmbed api。 insertEmbed 插入图片需要位置,内容类型以及图片的url: 获取位置: 上传图片 首先toolbar中添加image,还需要一个隐藏input元素用来 ......

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>