一、quill-editor安装

安装quill-editor

npm install vue-quill-editor --save

安装调节图片大小插件(不是必须的，看需求)

npm install quill-image-resize-module -S

二、 引用（两种方式）

1. 全局引用 在main.js中填入以下代码

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
//一定要引入这三个css，不然文本编辑器会出现不规则黑白几何图形
//这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor)

2.局部引用 在需要的组件内引用(如果不需要imageResize去掉即可)

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import imageResize from "quill-image-resize-module";
import VueQuillEditor, { Quill, quillEditor } from "vue-quill-editor";
Quill.register("modules/imageResize", imageResize);

三、配置(解决impots报错等问题)

1.在Vue-cli2.0中的webpack.dev.conf.js中

plugins[]中加入以下代码：

new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'}),

2.在Vue-cli3.0中的vue.config.js文件中(如果没有创建一个，与src同级)

加入以下代码

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

四、使用

在template中使用

<quill-editor v-model="content":options="editorOption"v-model="data"
></quill-editor>

data中

	  data: "",editorOption: {placeholder: "请输入...",modules: {toolbar: [[{ color: [] }, { background: [] }],["bold", "italic", "underline", "strike"],[{ size: ["small", false, "large"] }],["bold", "italic"],[{ list: "ordered" }, { list: "bullet" }],[{ script: "sub" }, { script: "super" }],[{ indent: "-1" }, { indent: "+1" }],[{ direction: "rtl" }],[{ header: 1 }, { header: 2 }],[{ list: "ordered" }, { list: "bullet" }],["link", "image"],["blockquote", "code-block"],[{ font: [] }],[{ align: [] }]],imageResize: {displayStyles: {backgroundColor: "black",border: "none",color: "white"},modules: ["Resize", "DisplaySize", "Toolbar"]}}},

五、结果

至此，结束，记录一下，希望能帮助到你。