Vue3使用vue-quill富文本编辑器并实现图片自定义上传替换默认base64格式图片

本文介绍在vue3环境下使用vue-quill富文本编辑器，并实现使用自定义上传接口将图片上传至服务器并保存为img标签src为服务器中图片的地址而不是默认的base64格式图片。从而解决富文本编辑器使用base64导致字段超长问题。

1.安装依赖库

使用npm安装

npm install @vueup/vue-quill --save
npm install quill-image-uploader --save

 使用pnpm安装

pnpm add @vueup/vue-quill
pnpm add quill-image-uploader

使用yarn安装

yarn add @vueup/vue-quill
yarn add quill-image-uploader

vue-quill为基础富文本组件

quill-image-uploader为图片上传扩展模块

2.引入组件

在需要使用富文本功能的组件中引入QuillEditor、Quill组件及其样式文件，引入quill-image-uploader插件并注册到Quill，具体代码如下

//局部引入
import { QuillEditor, Quill } from '@vueup/vue-quill';
import ImageUploader from "quill-image-uploader";
import '@vueup/vue-quill/dist/vue-quill.snow.css';
Quill.register("modules/imageUploader", ImageUploader);
export default {
  components: {
    QuillEditor
  },
}

3.使用组件

在组件中直接使用如下代码即可使用Quill富文本编辑组件

其中content-type设置为html后v-model绑定的值则自动获取到为带html标签的文本

4.配置图片上传以及富文本组件

Qui