Vue中如何使用vue-quill-editor实现富文本编辑，特别是图片上传功能？

本文共计1134个文字，预计阅读时间需要5分钟。

Vue Quill Editor 是我们在使用 Vue 框架时常用的一个富文本编辑器。编辑富文本时，我们常需要插入图片，Vue Quill Editor 默认的处理方式是将图片直接转换成 base64 编码。

vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，通常来讲，每个服务器端接收的post的数据大小都是有限制的，这样的话有可能导致提交失败，或者是用户体验很差，数据要传递很久才全部传送到服务器。

1.下载Vue-Quill-Editor

npm install vue-quill-editor --save

2.下载quill（Vue-Quill-Editor需要依赖）

npm install quill --save

3.使用

import { quillEditor } from "vue-quill-editor"; //调用编辑器 import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css';

本次使用到了富文本的封装和上传图片,因要求使用element-ui框架，我上传图片的时候选择了element-ui的Upload上传组件将图片上传到服务器。