vue-quill-editor 富文本图片放大缩小_quilleditor实现添加图片,并能对图片放大或小小-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36229552/article/details/126125347

本文介绍了如何在Vue项目中通过降低webpack版本、修改配置文件并引入quill-image-resize-module，实现富文本编辑器Quill图片大小调整功能，同时提供详细的步骤和关键代码段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装依赖

npm install quill-image-resize-module quill-image-drop-module --save

二、降低 webpack版本

npm uninstall webpack
npm install webpack@^4.0.0 --save-dev

三、vue.config.js 配置

const webpack = require('webpack')
module.exports = { 
configureWebpack: {
    // 富文本图片处理
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        Quill: 'quill/dist/quill.js'
      })
    ]
    },
  }

四、引入依赖到页面

import ImageResize from 'quill-image-resize-module' // 引用，调整图片大小
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import * as Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'

let fontSize = ['10px', '12px', '14px', '16px', '20px', '24px', '36px', '48px']
Quill.imports['attributors/style/size'].whitelist = fontSize
Quill.register(Quill.imports['attributors/style/size'])
Quill.register('modules/imageResize', ImageResize)

data() {
    let _self = this
    return {
      loading: false, // 加载loading
      editorOption: {
        placeholder: '',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              video: function (value) {
                _self.videoDialog.show = true
              }
            }
          },
          //添加的图片放大缩小 —— 主要地方
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      },

      // 图片上传变量
      fileList: [],
      // 上传后HTML
      HTML: '',
      // 视频上传变量
      videoDialog: {
        show: false,
        videoLink: '',
        activeName: 'first'
      },
      videoName: ''
    }
  },

在这里插入图片描述