Vue-quill-editor改變圖檔大小ImageResize問題解決

用過Vue-quill-editor的小夥伴都會發現，上傳的圖檔是不能任意變換它的大小的，這需要我們用一個插件，使這個圖檔可以任意變換大小。

步驟：

1、安裝quill-image-resize-module

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

2、引入到我們的.vue元件中

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);
           

3、在我們的script添加方法

export default {
        name: 'editor',
        data: function(){
            return {
                editorOption: {
                    placeholder: 'Hello World',
                    modules:{
                         toolbar: {
                            container:[
                                [{ 'size': ['small', false, 'large'] }],
                                [{ 'color': [] }, { 'background': [] }], 
                                [{ 'font': [] }],
                                [{ 'align': [] }],
                                ['bold', 'italic'],
                                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                                ['link', 'image'],
                                [{ 'direction': 'rtl' }],
                            ]
                        },
                       imageResize:{
                            displayStyles:{
                                backgroundColor:'black',
                                border:'none',
                                color:'white'
                            },
                            modules:['Resize','DisplaySize','Toolbar']
                        }
                    }
                },
            }
        },
   }
           

4、這一步vue-cli2和vue-cli3的操作有點不一樣；

如果vue-cli是3版本的：打開vue.config.js添加一下代碼

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

如果vue-cli是2版本的，則查找其他部落客的資料，因為我隻是用了vue-cli3版本的，望各位大佬體諒