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 时，不能再继续缩小了。