vue-quill-editor相关文档：
https://github.com/surmon-china/vue-quill-editor
vue-quill-editor添加图片大小修改。
简单效果图：
image.png
1.安装
npm install quill-image-resize-module quill-image-drop-module --save
2.导入相关组件
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
3.项目运行使用时，quill-image-resize-module插件报错imports如下：
image.png
解决方式：
找到项目的build/webpack.base.conf.js文件添加如下代码
const webpack = require('webpack')
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
]
4.在editorOption添加如下代码
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
imageDrop: true,
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}
完整的代码展示
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
//自定义字体类型
var fonts = [
"SimSun",
"SimHei",
"Microsoft-YaHei",
"KaiTi",
"FangSong",
"Arial",
"Times-New-Roman",
"sans-serif"
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);
export default {
name: 'HelloWorld',
components: {
quillEditor
},
data () {
return {
contentCode:'',
content: `
`,
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike', 'image'],
['formula', 'clean'],
['blockquote', 'code-block'],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],
[{'size': ['small', false, 'large', 'huge']}],
[{ 'font': fonts }],
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
[{'direction': 'rtl'}]
],
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
imageDrop: true,
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
}
},
placeholder: '输入内容........'
}
}
},
methods: {
//vue-quill-editor
onEditorBlur(quill) {
// console.log("editor blur!", quill, this.content);
//this.$emit("editorBlur", this.content);
this.contentCode=this.content
},
onEditorFocus(quill) {
this.contentCode=this.content
},
onEditorReady(quill) {
// console.log("editor ready!", quill);
},
onEditorChange({ quill, html, text }) {
// console.log("editor change!", quill, html, text);
this.content = html;
},
onEditorChange(quill) {
// console.log("编辑内容改变!", quill, this.content);
//this.$emit("editorBlur", this.content);
},
},
mounted() {
// console.log("this is current quill instance object", this.editor);
}
}