vue-quill-editor富文本编辑器详解

1、通过npm安装vue-quill-editor

在cmd输入命令：npm install vue-quill-editor --save

2、在main.js中引入vue-quill-editor

import VueQuillEditor from 'vue-quill-editor'//引入vue-quill-editor富文本编辑器
Vue.use(VueQuillEditor)//vue使用vue-quill-editor富文本编辑器

//这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入，一定要引入，不然样式会乱
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

3、vue页面中使用vue-quill-editor

最下面的样式可以根据自己需求去调，高度要加优先级，不然不会生效。

<template>
    <el-row>
		<quill-editor :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
		</quill-editor>
	</el-row>
</template>

<script>
	export default {
		data: function() {
			return {
				
				editorOption: {}
			}
		},
		methods: {
			onEditorBlur(editor) { //失去焦点事件 
			},
			onEditorFocus(editor) { //获得焦点事件
			},
			onEditorChange({
				editor,
				html,
				text
			}){ //编辑器文本发生变化
				console.log();
			}
			
		}
	}
</script>

<style>
	.ql-toolbar.ql-snow {
		text-align: left;
	}

	.ql-editor {
		height: 300px !important;
	}
</style>

 

4、最后看一下页面效果，另外头部的功能都是可以选择性展示的