一、前言

在一些博客、评论相关的位置，我们不会简单使用 HTML 中的 input 或者 textarea 等纯文本，需要用到富文本编辑器，即实现可以对文本进行加粗、变色、改变字体及大小等操作。

本文借助的是vue-quill-editor，这个对vue支持比较友好

GitHub地址：https://github.com/surmon-china/vue-quill-editor

官网地址：https://quilljs.com/docs/quickstart/

二、代码

1.安装 vue-quill-editor

npm install vue-quill-editor

2.导入 vue-quill-editor

在 mian.js 中

// 导入第三方富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入第三方文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

3.具体页面

<template>
    <!-- 富文本编辑器组件 -->
    <quill-editor v-model="addBlogVO.content"></quill-editor>
</template>
<style>
	/* 指定富文本编辑器样式 */
	.ql-editor {
		min-height: 300px;
	}
</style>

三、效果

四、其他

我们存储到数据库中的，是带样式标签的字符串，要复现富文本内容，只需使用 vue 的 v-html 属性即可：

<div v-html="this.blogInfo.content"></div>