vue富文本编辑器vue-quill-editor使用

1.安装包

    yarn add vue-quill-editor

安装依赖项

    yarn add quill

2.引入

在 main.js里加上代码:

    import Vue from 'vue'
    import VueQuillEditor from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    Vue.use(VueQuillEditor)

注意这里的css不要忘了引,不然没得样式

3.使用

• 在要使用的页面，直接使用 quill-editor标签即可
  

4.配置

• 主题:
  
  默认主题是是 snow, 主题名就是我们在main.js里面引的入的css名
• 工具栏设置:
  默认是这样的
  
  可以通过参数去掉不需要的工具

editorOption: {
        theme: "snow", // 主题
        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"], //清除字体样式
            ["image", "video"] //上传图片、上传视频
          ]
       }
}

• 图片拖拽上传
  需要安装 quill-image-drop-module 包

 yarn add quill-image-drop-module

然后在使用富文本的页面引入配置:

import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop',ImageDrop)
export default {
  data() {
    return {
      editorOption: {
        theme: 'snow',
        modules: {
            imageDrop: true
        }
      }
    };
  }
};

• 改变图片大小
  需要引入 quill-image-resize-module 模块

    yarn add quill-image-resize-module

然后在页面中使用:

import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module'
import imageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop',ImageDrop)
Quill.register('modules/imageResize', imageResize)

export default {
  data() {
    return {
      editorOption: {
        theme: 'snow',
        modules: {
            imageDrop:true,
            imageResize: {}
        }
      }
    };
  }
};

这个时候,打开控制台,会报如下错误:

解决方法:
在 vue.config.js中配置:

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

然后重启项目,解决!