1 安装

npm install vue-quill-editor --save

 2 引入

有两种引入方式

（1）全局引入(main)

import  VueQuillEditor from 'vue-quill-editor'//调用编辑器
// 样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

（2）局部引入

import { quillEditor } from 'vue-quill-editor'export default {components: {quillEditor}
}

3 在组件内使用

 4 自定义编辑器配置项（可以根据自己所需要的显示工具表）

 data中返回

 // 富文本编辑器配置editorOption: {theme: "snow", // or 'bubble'modules: {toolbar: [["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block"], // 引用  代码块[{ header: 1 }, { header: 2 }], // 1、2 级标题[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表[{ script: "sub" }, { script: "super" }], // 上标/下标[{ indent: "-1" }, { indent: "+1" }], // 缩进[{ direction: "rtl" }], // 文本方向[{size: ["12","14","16","18","20","22","24","28","32","36",],},], // 字体大小[{ header: [1, 2, 3, 4, 5, 6] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色// [{ font: ['songti'] }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["image", "video"], // 链接、图片、视频],},placeholder: "请输入正文",},

（1）对于字体详细的配置 

效果展示： 

如果想设置展现的那部分为滚动条形式的

（2）限制输入字符

 js：

methods:{// 内容改变事件onEditorChange({ quill, html, text }){// console.log( quill, html, text );this.content=html;if(this.$refs.ruleForm){this.$refs.ruleForm.validateField('content')}let event=this.$refs.mwQuillEditor;event.quill.deleteText(10,1)if(this.content===''){this.TiLength=0}else{this.TiLength=event.quill.getLength()-1}}}

效果展示 ：

（3）自定义控制上传的图片大小

• 安装插件

npm i quill-image-resize-module

•  在vue.config.js 文件中添加配置，记得重启哦~

//其他配置configureWebpack: {plugins: [new webpack.ProvidePlugin({"window.Quill": "quill/dist/quill.js",Quill: "quill/dist/quill.js",}),],}

引入

// 调整上传图片大小

import ImageResize from 'quill-image-resize-module'

Quill.register('modules/imageResize', ImageResize)

 放在toolbar下面就可以

// 调整图片大小imageResize: {displayStyles: {backgroundColor: "black",border: "none",color: "white"},modules: ["Resize", "DisplaySize", "Toolbar"]}