在vue中使用富文本编辑器vue-quill-editor

一、前言

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

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

GitHub地址：

官网地址：

二、代码

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.具体页面

    
    


	/* 指定富文本编辑器样式 */
	.ql-editor {
		min-height: 300px;
	}

三、效果

四、其他

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

限时特惠：本站每日持续更新海量各大内部创业教程，永久会员享受全站资源免费下载.www.heook.com
站长微信：wc764800