一，快速使用
官方文档地址：/liuwave/quill/1434140
安装：
npm install vue-quill-editor --save
因为通常是只有某个页面使用，所以选择在组件中使用：
// require stylesimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import {quillEditor } from 'vue-quill-editor'export default {components: {quillEditor}}
具体的组件完整代码：
<template><div class="addArticle"><el-card shadow="never" class="upBox"><quill-editor v-model="addForm"></quill-editor></el-card></div></template><script>import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import {quillEditor } from 'vue-quill-editor'export default {data(){return{addForm:''}},components: {quillEditor}} //完成上述步骤之后即可使用</script><style lang="less" scoped></style>
实现的效果：
二，本次我自己使用的设置
<template><div class="addArticle"><el-card shadow="never" class="upBox"><el-form :model="articleForm" ref="articleForm" ><el-form-item label="标题:" prop="title" label-width="82px" required><el-input v-model="articleForm.title" ></el-input></el-form-item><el-form-item label="详细内容:" prop="detail" label-width="82px" required><quill-editor ref="myQuillEditor"class='editor'v-model="articleForm.detail":options="editorOption"@focus="onEditorFocus($event)"@blur="onEditorBlur($event)"@change="onEditorChange($event)"></quill-editor></el-form-item><el-form-item class="btnBox"><el-button>取消</el-button><el-button @click="commit">确定</el-button></el-form-item></el-form></el-card></div></template><script>import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import {quillEditor } from 'vue-quill-editor'// 工具栏配置const toolbarOptions = [["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']["blockquote", "code-block"], // 引用 代码块-----['blockquote', 'code-block'][{header: 1 }, {header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }][{list: "ordered" }, {list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }][{script: "sub" }, {script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }][{indent: "-1" }, {indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }][{direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}][{size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }][{header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }][{color: [] }, {background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }][{font: [] }], // 字体种类-----[{ font: [] }][{align: [] }], // 对齐方式-----[{ align: [] }]["clean"], // 清除文本格式-----['clean']["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']];export default {data(){return{articleForm:{title:'',//预先设置文本detail:''},//富文本编辑器配置editorOption: {modules: {//工具栏定义的toolbar: toolbarOptions},theme: "snow",placeholder: "请输入正文"}}},methods:{// 准备富文本编辑器onEditorReady() {},// 富文本编辑器 失去焦点事件onEditorBlur() {},// 富文本编辑器 获得焦点事件onEditorFocus() {},// 富文本编辑器 内容改变事件onEditorChange() {},commit(){console.log(this.articleForm.detail)}},components: {quillEditor},computed: {//当前富文本实例editor() {return this.$refs.myQuillEditor.quill;}},} //完成上述步骤之后即可使用</script><style >/* editor的汉化-利用样式进行的汉化 *//* 编辑器高度和宽度设置 */.editor {line-height: normal !important;height: 800px;width: 780px;margin-bottom: 80px;}.ql-snow .ql-tooltip[data-mode="link"]::before {content: "请输入链接地址:";}.ql-snow .ql-tooltip.ql-editing a.ql-action::after {border-right: 0px;content: "保存";padding-right: 0px;}.ql-snow .ql-tooltip[data-mode="video"]::before {content: "请输入视频地址:";}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: "14px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {content: "10px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {content: "18px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {content: "32px";}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: "文本";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: "标题1";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: "标题2";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: "标题3";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: "标题4";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: "标题5";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: "标题6";}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: "标准字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {content: "衬线字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {content: "等宽字体";}</style><style lang="less" scoped>@import "~@/common/global.less";.addArticle{background: #F3F4F8;// 顶部样式.upBox{padding: 26px 24px 24px 24px;border: none;margin-bottom: 20px;/deep/.el-card__body{padding: 0;.el-form-item{.mylabel_and_input(@w:780px);}.el-form-item .quill-editor{margin-left: 16px;}.btnBox{.el-form-item__content{margin-left: 270px;.el-button:nth-of-type(1){.mybutton(@h:40px,@buttonWidth:120px,@bgColor:#E9E8E8,@fontColor:#666666);border: none;margin-bottom: 24px;}.el-button:nth-of-type(2){.mybutton(@h:40px,@buttonWidth:120px,@bgColor:#DE9A6C,@fontColor:#FFFFFF);border: none;margin-bottom: 24px;margin-left: 66px;}}}}}}</style>
实现效果：
