vue-quill-editor 富文本图片放大缩小
vue 富文本图片放大缩小
·
一、安装依赖
npm install quill-image-resize-module quill-image-drop-module --save
二、降低 webpack版本
npm uninstall webpack
npm install webpack@^4.0.0 --save-dev
三、vue.config.js 配置
const webpack = require('webpack')
module.exports = {
configureWebpack: {
// 富文本图片处理
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
Quill: 'quill/dist/quill.js'
})
]
},
}
四、引入依赖到页面
import ImageResize from 'quill-image-resize-module' // 引用,调整图片大小
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import * as Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
let fontSize = ['10px', '12px', '14px', '16px', '20px', '24px', '36px', '48px']
Quill.imports['attributors/style/size'].whitelist = fontSize
Quill.register(Quill.imports['attributors/style/size'])
Quill.register('modules/imageResize', ImageResize)
data() {
let _self = this
return {
loading: false, // 加载loading
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
video: function (value) {
_self.videoDialog.show = true
}
}
},
//添加的图片放大缩小 —— 主要地方
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: ['Resize', 'DisplaySize', 'Toolbar']
}
}
},
// 图片上传变量
fileList: [],
// 上传后HTML
HTML: '',
// 视频上传变量
videoDialog: {
show: false,
videoLink: '',
activeName: 'first'
},
videoName: ''
}
},
更多推荐
已为社区贡献5条内容
所有评论(0)