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