vue-quill-editor 富文本编辑器支持图片拖拽和放大缩小

＊且听风吟

已于 2023-03-31 09:23:23 修改

阅读量8.7k

点赞数 11

分类专栏： # Vue 2.x 文章标签： vue.js javascript 前端

于 2021-11-22 18:15:00 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/121017110

版权

本文介绍了如何在vue-quill-editor中启用图片拖拽和缩放功能。通过安装编辑器、拖拽和缩放插件，然后在组件中引入并设置相关配置，解决因缺少webpack支持导致的报错问题。提供了两种webpack配置的解决方案，并展示了最终实现的效果。

摘要由CSDN通过智能技术生成

富文本编辑器上传图片后，图片是不能放大，缩小和拖拽的，要想让图片放大，缩小可以拖拽，需要下载 vue-quill-editor image依赖的功能插件。

第一步，安装依赖包，包含编辑器包，拖拽包，缩放包：

npm i quill-image-drop-module  -S // 拖拽插件
npm i quill-image-resize-module -S // 放大缩小插件

或

yarn add quill-image-drop-module
yarn add quill-image-resize-module

quill-image-drop-module 安装成功后的信息：
在这里插入图片描述
quill-image-resize-module 安装成功后的信息：

第二步，在组件里引入使用：

import resizeImage from 'quill-image-resize-module' // 图片缩放组件引用
import {
    ImageDrop } from 'quill-image-drop-module'; // 图片拖动组件引用
Quill.register('modules/imageDrop', ImageDrop); // 注册
Quill.register('modules/resizeImage ', resizeImage ) // 注册

第三步，设置editorOption对象：

 // 富文本编辑器配置
      editorOption: {
   
        placeholder: '请在这里输入',
        theme: 'snow', //主题 snow：有工具栏的；bubble：只有文本域的
        history: {
   
          delay: 1000,
          maxStack: 50,
          userOnly: false
        },
        modules: {
   
          imageDrop: true,      //图片拖拽
          imageResize: {
             //放大缩小
            displayStyles: {
   
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          },
          toolbar: {
   
            container