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

富文本编辑器上传图片后，图片是不能放大，缩小和拖拽的，要想让图片放大，缩小可以拖拽，需要下载 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: toolbarOptions, //工具栏
            handlers: {
            }
          },
        }
      }

当按照按照以上步骤正确的引入各种插件后，会显示以下报错：

出现这个错误的原因是：插件需要配置webpack支持。

解决方案：

方案一：

找到项目的build/webpack.base.conf.js文件添加如下代码：

var webpack = require('webpack');
module.exports = {
// 在vue.config.js中configureWebpack中配置
// 要引入webpack
configureWebpack: {
    plugins: [
     ...
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
      ...
    ]
  }
}

方案二：修改根目录下的vue.config.js文件：

const webpack = require('webpack')
module.exports = {
  // 在vue.config.js中configureWebpack中配置
  // 要引入webpack
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        Quill: 'quill/dist/quill.js'
      })
    ]
  }
}

最后，需要重新运行一下项目。

我是使用的方案二，效果如下：

完整版代码如下：

<template>
  <div class="components-container">
    <div>
      <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" />
    </div>
    <div class="editor-content" v-html="content" />
  </div>
</template>

<script>
import Quill from 'quill'
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

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

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],                     //引用，代码块
  [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],    // 有序列表，无序列表
  [{ 'script': 'sub' }, { 'script': 'super' }],     // 下角标，上角标
  [{ 'indent': '-1' }, { 'indent': '+1' }],         // 缩进
  [{ 'direction': 'rtl' }],                         // 文字输入方向
  [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题
  [{ 'color': [] }, { 'background': [] }],          // 颜色选择
  [{ 'font': [] }], // 字体
  [{ 'align': [] }],    // 居中
  ['clean'],            // 清除样式,
  ['link', 'image'],  // 上传图片、上传视频
]

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      // 富文本编辑器默认内容
      content: '',
      // 富文本编辑器配置
      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: toolbarOptions, //工具栏
            handlers: {
            }
          },
        }
      }
    }
  },
  methods: {
    // 准备富文本编辑器
    onEditorReady (quill) {
    },
    //失去焦点事件
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    //获得焦点事件
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    //内容改变事件
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    }
  }
}
</script>
<style lang='less'>
.ql-container {
  // 设置默认字号
  font-size: 16px;
  height: 500px;
}
</style>