vue-quill-editor富文本编辑器的使用（实现图片/文件上传）

最新推荐文章于 2025-06-27 14:49:55 发布

凉红茶

最新推荐文章于 2025-06-27 14:49:55 发布

阅读量8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：插件使用

本文链接：https://blog.youkuaiyun.com/weixin_40682842/article/details/110630443

本文介绍了如何在vue-quill-editor中实现图片和文件的上传功能。通过隐藏upload组件，当点击编辑器的相应图标时触发上传接口，服务器返回地址后插入到编辑器中。图片上传成功后，地址会插入到光标位置。文件上传同样如此，但需要自定义文件图标，并确保点击文件链接能直接下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

文本编辑的三个功能分别是：添加链接，上传图片，上传文件
在这里插入图片描述

编辑器配置

基本配置

<template>
   <quill-editor class="editor" ref="QuillEditor" v-model="detail" :options="editorOption"></quill-editor>
</template>

<script>
// 编辑器工具栏配置
const toolbarOptions = [
  ['link', 'image', 'upload']
]
export default {
   
   
	data() {
   
   
	  detail: '',
	  editorOption: {
   
   
        modules: {
   
   
          toolbar: {
   
   
            container: toolbarOptions, // 工具栏
            handlers: {
   
   
              image: function(value) {
   
    //编辑器-上传图片
                if (value) {