Vue中使用富文本编辑器以及处理图片缩放问题—quillEditor

#第一步下载组件

npm install vue-quill-editor 

第二步在需要使用的组件内引入· 富文本组件

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

第三步配置及基本使用
1.html

<template>
    <div>
      <quill-editor
        style="height:200px;"
        ref="text"
        v-model="content"
        :options="editorOption"
      />
    </div>
</template>

2.js

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    quillEditor
  },
  name: "HelloWorld",
  data() {
    return {
      content: "",
      editorOption: {
        modules: {},
      }
    };
  },
  methods: {}
};
</script>

3.配置菜单在editorOption中配置

    editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、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", "video"] // 链接、图片、视频
          ] //工具菜单栏配置
        },
        placeholder: "请在这里添加产品描述", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true //语法检测
      }

效果展示

第四步增加图片拖拽以及放大缩小功能
1.安装插件

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

2.组件引用

import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop);
Quill.register('modules/imageResize', ImageResize);

3.工具栏配置

      editorOption: {
        modules: {
          imageDrop: true, //图片拖拽
          imageResize: {
            displaySize: true
          },
        },
      }

4.解决报错

在build文件夹下的webpack.base.conf.js新增如下代码

const webpack = require('webpack');
module.exports = {
	plugins: [
    new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
  ]
}