vue项目实战之alone-admin（五）：vue-quill-editor富文本编辑器组件封装

前面一节只是简单的说了一下部分前端页面的开发，但是一节下来，发现只是单纯的从element-ui的官方文档上面“搬代码”，所以后续就不打算写这样的只是前端页面的实现了，对alone-admin项目感兴趣的小伙伴，直接到github上下载查看源码就可以了（欢迎star哈）。

本节来说一下vue-quill-editor富文本编辑器怎么在alone-admin项目中使用，并且将其封装成组件，以方便后续使用或更换其他的富文本编辑器。

一、vue-quill-editor富文本编辑器的安装和引入

第一步肯定是要先安装了。执行命令：npm install vue-quill-editor --save

第二步就是要正式使用了，vue-quill-editor有两种引入方式，分别是全局引入和组件引入，至于两者什么区别，这里就不多赘述了。

全局引入：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

组件中引入（推荐）：

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 {
  components: {
    quillEditor
  }
}

这两种方式在vue-quill-editor的GitHub地址上都有详细的描述，GitHub地址：https://github.com/surmon-china/vue-quill-editor可以参考着看下。

二、vue-quill-editor富文本编辑器在alone-admin项目中的使用

在本项目中vue-quill-editor采用的组件引入（局部引入）的方式，那么下面来看一下，本项目是怎么做的。 

首先，我们在项目中的components组件目录新建QuillEditor.vue文件，我们封装的vue-quill-editor富文本编辑器就在这写，直接看代码：

<template>
	<div class="edit_container">
		<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"  @change="onEditorChange($event)">
		</quill-editor>
		<button v-on:click="saveHtml">保存</button>
	</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 {
		components: {
			quillEditor
		},
		data() {
			return {
				content: `<p>hello world</p>`,
				editorOption: {}
			}
		},
		computed: {
			editor() {
				return this.$refs.myQuillEditor.quill;
			},
		},
		methods: {
			onEditorReady(editor) { // 准备编辑器
			},
			onEditorBlur() {}, // 失去焦点事件
			onEditorFocus() {}, // 获得焦点事件
			onEditorChange() {}, // 内容改变事件
			saveHtml: function(event) {
				alert(this.content);
			}
		}
	}
</script>

<style>
</style>

这样就相当于我们的编辑器组件封装好了，里面多了个保存按钮，是为了能让大家更明白quill编辑器的使用，就是清楚富文本的内容要怎么获取的。

组件封装好了，下面我们再来看应该怎么使用。

在需要使用vue-quill-editor编辑器的页面，我们引入组件：

<template>
	<div>
		<QuillEditor ref="quill"></QuillEditor>
		<button @click="getcontent">获取内容</button>
	</div>
</template>

<script>
	import QuillEditor from '@/components/QuillEditor.vue'
	export default{
		components: {
			QuillEditor
		},
		methods:{
			getcontent(){
				console.log(this.$refs.quill.content)
			}
		}
	}
</script>

<style>
</style>

相信只要你搞明白怎么获取富文本的内容了，那么使用这个编辑器使用起来应该就没问题了。最后再奉上alone-admin后台管理系统的地址：https://github.com/pmb2020/alone-admin，欢迎star。