vue3使用vue-quill实现富文本编辑器上传图片

最新推荐文章于 2026-04-24 09:26:35 发布

原创

最新推荐文章于 2026-04-24 09:26:35 发布 · 1w 阅读

标签

#vue.js #javascript #前端

这篇博客介绍了如何在Vue3项目中集成VueQuill富文本编辑器，以及如何配置使其以HTML格式保存内容，并实现图片上传功能。通过自定义上传组件和Quill的事件监听，图片被上传到服务器并以超链接形式插入到编辑器中，而不是以base64格式保存。

最近开发的一个vue3+element-plus的项目，需要用到富文本编辑器，最终选择了VueQuill这一款轻便型的富文本编辑器：官网地址为
https://vueup.github.io/vue-quill/guide/installation.html

首先，我们把它install下来，执行以下对应命令下载

npm install @vueup/vue-quill@beta --save
# OR
yarn add @vueup/vue-quill@beta

在vue项目的main.js中进行相关的配置

import {
   
    createApp } from 'vue'
import {
   
    QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const app = createApp()
app.component('QuillEditor', QuillEditor)

我个人是将富文本编辑器封装成了公共组件，在components中创建editor.vue公共组件
在这里插入图片描述
引入quillEditor

import {
   
    QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
   
   
  components: {
   
   
    QuillEditor
  }
}

在dom中使用

<template>
  <QuillEditor theme="snow" />
</template>

这样一个轻便的vue-quill富文本编辑器就出来了。然而，我们希望得到的数据是html的相关dom标签，希望图片不是以base64的格式保存到dom中，而是通过上传接口获得相应的超链接插入到我们需要的img标签里。这可咋办呢？别急，我们一一来对应。

首先quill输出的文件格式是需要配置的

<QuillEditor
      id="editorId"
      ref="myQuillEditor"
      //绑定数据需要加:content才能绑定成功
      v-model:content="content"
      theme="snow"
      //这里是指定富文本输出的文件，我需要的数据格式是html的，而默认是delta，这里小伙伴们需要特别注意
      contentType="html"
      :options="options"
    />

我们通过element的upload功能来实现上传图片的功能

 <el-upload
      class="editor-img-uploader"
      :action="upLoadUrl"
      :show-file-list="false"
      :headers="headers"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-plus editor-img-uploader"></i>
    </el-upload>

并将此dom隐藏

<style scoped lang='less'>
.editor-img-uploader {
   
   
  display: none;
}
.ql-editor {
   
   
  min-height: 300px;
}
</style>

在图片返回成功时通过获得富文本光标的位置动态将img标签插入我们希望它所在的位置

 // 上传成功函数
     // 上传组件获得的图片地址反渲染近富文本中
    function handleSuccess

最低0.47元/天解锁文章