K先生个人博客

当前位置:首页 > 爱技术 > 正文

vue项目实战之alone-admin(五):vue-quill-editor富文本编辑器组件封装

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

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

vue-quill-editor富文本编辑器组件封装

一、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。

作者K先生本文地址http://www.gold404.cn/info/115

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表

    暂时还没有评论哦!