开发喵星球

1、安装依赖

npm install quill-image-resize-module

2、在vue.config.js文件中新增以下代码

const webpack = require('webpack');
....

plugins: [
  ....
  new webpack.ProvidePlugin({
    'window.Quill': 'quill/dist/quill.js',
    'Quill': 'quill/dist/quill.js',
  })
],

3、修改富文本组件src\components\Editor\index.vue

....
....
<script>
....
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize);

export default {
  name: "Editor",
  data() {
    return {
      ....
      options: {
        ....
        modules: {
          ....
          //图片缩放
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
        },
        ....
      },
    };
  },
  ....
};
</script>