1.Vue项目安装依赖
npm install vue-quill-editor --savenpm 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'}]);},}
5.重启项目，效果
