WangEditor添加上传附件功能 vue3

ddestinyzz

已于 2023-02-23 14:42:25 修改

阅读量3.9k

点赞数 5

文章标签：编辑器

于 2023-02-23 14:18:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52563030/article/details/129180338

版权

文章讲述了如何在WangEditor中正确配置并注册上传附件插件，以避免二次编辑时出现错误。关键步骤包括在main.ts中全局注册插件，设置编辑器配置以处理附件节点的菜单，以及实现自定义上传功能，利用上传接口将文件插入到富文本编辑器中。

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

看官方文档要求 @WangEditor/editor 版本 >=5.1.16

下载上传附件的插件

yarn add @wangeditor/plugin-upload-attachment

首先要注册到编辑器，如果把下面的代码写在WangEditor的组件里出现第一次使用编辑没问题，但是第二次编辑会报错的问题，那么可能是多次注册引起的，将下面的注册代码写在main.ts文件里。

import { Boot } from '@wangeditor/editor'
import attachmentModule from '@wangeditor/plugin-upload-attachment'

// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
Boot.registerModule(attachmentModule)

然后在

import { IToolbarConfig, IEditorConfig } from "@wangeditor/editor";
const editorConfig: Partial<IEditorConfig> = {
        
  // 在编辑器中，点击选中“附件”节点时，要弹出的菜单
  hoverbarKeys: {
    attachment: {
      menuKeys: ['downloadAttachment'], // “下载附件”菜单
    },
  },
  MENU_CONF: {
/**
 * @