quill-editor quill-image-resize-module 富文本修改圖片大小

先看效果圖：

 

 

 倒騰了好久，終於倒騰出來了.嗚嗚嗚嗚

先說明，我用的是Vue-Cli 2.0

1.在原本的quill-editor能正常使用的情況下，安裝quill-image-drop-module和quill-image-resize-module

npm install quill-image-drop-module -S
npm install quill-image-resize-module -S

2.我是在全局注冊的quill-editor，在main.js中加入灰色背景的代碼

 

//富文本編輯器
import VueQuillEditor, { Quill } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import imageResize from 'quill-image-resize-module' // 調整大小組件。
import { ImageDrop } from 'quill-image-drop-module'; // 拖動加載圖片組件。
Quill.register('modules/imageResize', imageResize ); Quill.register('modules/imageDrop', ImageDrop);
Vue.use(VueQuillEditor);

 

3.找到項目中build-->webpack.dev.conf.js--> plugins配置項，添加以下代碼

　　new webpack.ProvidePlugin({

      'window.Quill': 'quill/dist/quill.js',

      'Quill': 'quill/dist/quill.js'

    })

 

 

 

 

 

 

 到此，就能改變圖片大小了

倒騰期間遇到了兩個問題：

1. Cannot read property 'imports' of undefined

2. quill Cannot import modules/ImageResize. Are you sure it was registered?

第一個錯主要是要配置webpack，也就是上面的第三步

第二個錯主要是第二步單詞有問題；最開始我寫的modules/resizeImage，報錯；后面仔細檢查了寫成modules/ImageResize還是不對，報錯；然后發現必須是modules/imageResize

 

 自己試出來的，如果有錯，還請大佬們指點。