vue-quill-editor富文本编辑器使用，附带图片更改大小功能

本文主要是介绍vue-quill-editor富文本编辑器使用，附带图片更改大小功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.Vue项目安装依赖

npm install vue-quill-editor --save
npm install quill-image-resize-module --save

2.项目引用，我用的是全局引用

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);
Vue.use(quillEditor)

3.使用组件，并添加配置项

 <quill-editorclass="editor":options="editorOption"></quill-editor>//scriptdata() {return {editorOption: {placeholder: "请输入...",modules: {toolbar: {container: [["bold", "italic", "underline", "strike"],[{ color: [] }, { background: [] }],["link", "image"],["blockquote", "code-block"],[{ align: [] }],[{ list: "ordered" }, { list: "bullet" }],[{ script: "sub" }, { script: "super" }],[{ header: 1 }, { header: 2 }],[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ size: ["small", false, "large", "huge"] }],[{ font: [] }],[{ indent: '-1' }, { indent: '+1' }],],},imageResize: {displayStyles: {backgroundColor: "black",border: "none",color: "white",},modules: ["Resize", "DisplaySize", "Toolbar"],},},},}},

4.Vue 3.0 在src同目录下创建 vue.config.js 文件

const webpack = require('webpack')
module.exports = {chainWebpack: config => {config.plugin('provide').use(webpack.ProvidePlugin, [{'window.Quill': 'quill'}]);},
}