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

vue-quill-editor 是基于 Quill.js 封装的一个 Vue 富文本编辑器组件，要实现图片拉伸放大缩小，需要对 Quill.js 进行操作。

首先，需要在 Quill.js 的 toolbar 中添加图片缩放按钮。可以参考 Quill.js 官方提供的 custom toolbar demo，添加一个 “zoom” 按钮。

<div id="toolbar">
  <button class="ql-bold"></button>
  <button class="ql-italic"></button>
  <button class="ql-underline"></button>
  <button class="ql-image"></button>
  <button class="ql-zoom"></button>
</div>

然后，在初始化 Quill 实例时，需要监听 “selection-change” 事件，检测当前选中区域是否包含图片，并动态显示或隐藏 “zoom” 按钮。

var quill = new Quill('#editor', {
  modules: {
    toolbar: '#toolbar'
  },
  theme: 'snow'
});

quill.on('selection-change', function(range, oldRange, source) {
  if (range) {
    var currentFormat = quill.getFormat(range);
    if (currentFormat.image) {
      document.querySelector('.ql-zoom').style.display = 'inline-block';
    } else {
      document.querySelector('.ql-zoom').style.display = 'none';
    }
  }
});

接下来，实现 “zoom” 按钮的具体操作。可以通过监听 “click” 事件，获取当前选中的图片对象，然后对图片设置样式来实现缩放操作。

var zoomButton = document.querySelector('.ql-zoom');
zoomButton.addEventListener('click', function() {
  var range = quill.getSelection();
  if (range) {
    var currentFormat = quill.getFormat(range);
    if (currentFormat.image) {
      var img = quill.getSelection().getNativeRange().getBoundingClientRect().top;
      img.style.width = '200px';
      img.style.height = '200px';
    }
  }
});

需要注意的是，这里的缩放操作只是简单地改变了图片的宽高值，而没有进行真正的图片缩放。如果需要实现更复杂的缩放效果，可以使用第三方库，比如 jQuery 的 resizable 方法。