VueQuill富文本编辑器实现图片的缩放

概述

VueQuill富文本编辑器添加的图片默认是不可以缩放的，如果图片尺寸过大的话，会非常影响用户的体验。虽然不支持缩放图片，但是可以通过安装quill-blot-formatter这个插件来实现

实现过程

安装插件

1	npm install --save quill-blot-formatter

引入插件

1	import BlotFormatter from 'quill-blot-formatter';

配置插件

下面是配置两个及以上插件的格式，如果只配置一个插件，其格式查看博客：Spring Boot 实现 VueQuill 富文本编辑器上传图片到服务器 | LeDao’s Blog (zoutl.cn)

const modules = [{
  //这里是另一个插件的配置
}, {
  name: 'BlotFormatter',
  module: BlotFormatter,
  options: {
    overlay: {
      style: {
        border: '2px solid red',
      }
    }
  }
}]

使用插件

使用编辑器的代码如下，关键代码是:modules="modules"

<QuillEditor
    v-model:content="content"
    placeholder="这里输入商品详情..."
    theme="snow"
    ref="editor"
    toolbar="full"
    contentType="html"
    :modules="modules"
    style="height: 300px;"
/>