vue-quill-editor富文本编辑器使用，附带图片更改大小功能

1.Vue项目安装依赖

npm install vue-quill-editor --save
npm install quill-image-resize-module --save

2.项目引用，我用的是全局引用

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import  quillEditor  from 'vue-quill-editor';
import * as Quill from 'quill'  // 引入编辑器
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize',ImageResize);
Vue.use(quillEditor)

3.使用组件，并添加配置项

 <quill-editor
    class="editor"
    :options="editorOption"
  ></quill-editor>
  
  //script
  data() {
    return {
     editorOption: {
        placeholder: "请输入...",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"],
              [{ color: [] }, { background: [] }],
              ["link", "image"],
              ["blockquote", "code-block"],
              [{ align: [] }],
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "sub" }, { script: "super" }],
              [{ header: 1 }, { header: 2 }],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ size: ["small", false, "large", "huge"] }],
              [{ font: [] }],
              [{ indent: '-1' }, { indent: '+1' }],
            ],
          },
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        },
      },
    }
  },
 

4.Vue 3.0 在src同目录下创建 vue.config.js 文件

const webpack = require('webpack')
module.exports = {
    chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            'window.Quill': 'quill'
        }]);
    },
}

5.重启项目，效果