vue-quill-editor视频上传

vue-quill-editor是一个基于Vue.js和Quill.js的富文本编辑器，它支持插入视频，并且可以自定义上传组件将视频上传到服务器。具体实现思路是劫持原来的视频上传事件，然后将视频上传到服务器，服务器返回一个视频链接，再插入到富文本编辑器中。在实现过程中，需要修改quill.vue文件，引入修改过的video模块并注册。同时，还可以设置video标签的自定义属性，以满足不同的需求。

相关问题

vue vue-quill-editor怎么实现图片拉伸放大缩小

可以通过自定义 Quill 的 toolbar 实现图片的拉伸、放大和缩小。

首先，你需要在 `vue-quill-editor` 的配置中添加一个自定义的 toolbar。例如：

<quill-editor
  v-model="content"
  :options="editorOption"
>
  <div v-if="editorOption.toolbar">
    <span class="ql-formats">
      <select class="ql-size">
        <option value="small"></option>
        <option selected></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-stretch"></button>
      <button class="ql-zoom-in"></button>
      <button class="ql-zoom-out"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-image"></button>
    </span>
  </div>
</quill-editor>

然后，在 `mounted()` 钩子函数中获取 Quill 实例，并添加自定义的 toolbar 按钮的逻辑。例如：

mounted() {
  this.$nextTick(() => {
    const quill = this.$refs.myQuillEditor.quill
    const stretchButton = quill.getModule('toolbar').container.querySelector('.ql-stretch')
    const zoomInButton = quill.getModule('toolbar').container.querySelector('.ql-zoom-in')
    const zoomOutButton = quill.getModule('toolbar').container.querySelector('.ql-zoom-out')

    stretchButton.addEventListener('click', function() {
      // todo: 进行图片拉伸的逻辑
    })

    zoomInButton.addEventListener('click', function() {
      // todo: 进行图片放大的逻辑
    })

    zoomOutButton.addEventListener('click', function() {
      // todo: 进行图片缩小的逻辑
    })
  })
}

其中，`quill.getModule('toolbar').container` 获取到的是 Quill 的 toolbar 容器，可以通过 `querySelector()` 方法获取到自定义按钮的 DOM 元素并添加事件监听器。

接下来，你需要实现图片拉伸、放大和缩小的逻辑。可以通过 Quill 的 Delta API 获取到当前选中的图片，并对其属性进行修改。例如：

stretchButton.addEventListener('click', function() {
  const range = quill.getSelection()
  if (!range) return
  const [image] = quill.getSemanticHTML(range.index, range.length).match(/<img.*?>/g)
  if (image) {
    quill.updateContents(new Delta().retain(range.index).delete(range.length).insert({ image: { ...Quill.Attributor.AttributeList.fromHTML(image), width: '200px', height: 'auto' } }))
  }
})

上面的代码中，首先获取到当前选中的图片（即 `<img>` 标签），然后通过 Quill 的 `updateContents()` 方法修改图片的属性，例如将其宽度设置为 200px，高度设置为自适应。

类似地，你可以实现图片的放大和缩小。例如：

zoomInButton.addEventListener('click', function() {
  const range = quill.getSelection()
  if (!range) return
  const [image] = quill.getSemanticHTML(range.index, range.length).match(/<img.*?>/g)
  if (image) {
    const attr = Quill.Attributor.AttributeList.fromHTML(image)
    const width = parseInt(attr.width.replace('px', ''))
    const height = parseInt(attr.height.replace('px', ''))
    quill.updateContents(new Delta().retain(range.index).delete(range.length).insert({ image: { ...attr, width: `${width + 10}px`, height: `${height + 10}px` } }))
  }
})

zoomOutButton.addEventListener('click', function() {
  const range = quill.getSelection()
  if (!range) return
  const [image] = quill.getSemanticHTML(range.index, range.length).match(/<img.*?>/g)
  if (image) {
    const attr = Quill.Attributor.AttributeList.fromHTML(image)
    const width = parseInt(attr.width.replace('px', ''))
    const height = parseInt(attr.height.replace('px', ''))
    if (width > 10 && height > 10) {
      quill.updateContents(new Delta().retain(range.index).delete(range.length).insert({ image: { ...attr, width: `${width - 10}px`, height: `${height - 10}px` } }))
    }
  }
})

上面的代码中，首先获取到当前选中的图片的宽度和高度，然后将其分别增加或减少 10px。需要注意的是，当图片的宽度或高度小于等于 10px 时，不能再继续缩小了。

vue中vue-quill-editor对应quill什么版本

vue-quill-editor 对应的 Quill 版本是1.3.6。

Vue-quill-editor 是基于 Quill 富文本编辑器的一个 Vue 组件封装。它可以在 Vue 项目中很方便地集成 Quill 编辑器。

Vue-quill-editor 最新的版本是2.7.1，但该版本对应的 Quill 版本是1.3.6。这意味着 Vue-quill-editor 组件内部使用的是 Quill 编辑器的1.3.6 版本。

Quill 是一个功能丰富的、可定制的富文本编辑器，它提供了许多强大的编辑功能，如格式文字、插入图片、创建链接等。Quill 的当前最新版本是1.3.7。在使用 vue-quill-editor 组件时，我们可以参考 Quill 官方文档来了解和使用更多 Quill 的特性和 API。

总结：Vue-quill-editor 对应的 Quill 版本是1.3.6。在使用这个组件时，我们可以获得 Quill 编辑器的所有功能，并且能够方便地在 Vue 项目中进行集成和定制。