用过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版本的,望各位大佬体谅

Logo

前往低代码交流专区

更多推荐