Vue中如何使用vue-quill-editor富文本编辑器

首先安装插件

npm install vue-quill-editor -S(或者--save)

引入富文本编辑器的文件

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)

然后就可以封装一个专门的富文本编辑器的组件，这里小编给出自己在实际开发中的一个模板代码，如有不当之处，欢迎交流评论。

封装的.vue文件

<template>
	<div>
		<quill-editor class="editor"
		    ref="myTextEditor"
		    v-model="contents"
		    :options="editorOption"
		    @blur="onEditorBlur($event)"
		    @focus="onEditorFocus($event)"
		    @ready="onEditorReady($event)"
		    @change="onEditorChange($event)">
		</quill-editor>
	</div>
</template>

<script>
	let debounce = (function() {
		let timer = null
		return function(callback, ms) {
			clearTimeout(timer)
			timer = setTimeout(callback, ms);
		}
	})()
	export default{
        name: 'editor-quill',
		props:['content','placeholders'],
		data(){
			return {
				contents: this.content,
				editorOption: {
					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: ["small", false, "large", "huge"] }], // 字体大小
						  // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
						  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
						  // [{ font: [] }], // 字体种类
						  // [{ align: [] }], // 对齐方式
						  // ["clean"], // 清除文本格式
						  ["link", "image", "video"] // 链接、图片、视频
						], //工具菜单栏配置
				  },
				  placeholder: this.placeholders, //提示
				  readyOnly: false, //是否只读
				  theme: 'snow', //主题 snow
				  syntax: true, //语法检测
				}
			}
		},
		methods:{
			 onEditorBlur(editor) {},
			// 获得焦点
			onEditorFocus(editor) {},
			// 开始
			onEditorReady(editor) {},
			// 值发生变化
			onEditorChange(editor) {
				debounce(() => {
					this.contents = editor.html;
					this.$emit("getMessage",editor.html)
				},1000)
			}
		},
		computed:{
            editor() {
                return this.$refs.myTextEditor.quillEditor;
            }
		}
	}
</script>

<style scoped>
	.editor {
	  line-height: normal !important;
	}
	.editor /deep/ .ql-editor{
		height: 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>

这一段代码也是参考了其他大佬写的，自己加以修改，因为这既然是引用了封装，那么在父组件中就需要获取到编辑器中的内容，所以我提供了一个emit可触发父组件中的事件，但是如果在那个变化的函数中只写一个emit，你会发现他只要输入一个字符就会进行传输，所以此处就可以采用防抖技术来控制这个弊端。具体的可以参考官方文档。