WangEditor添加上传附件功能 vue3

看官方文档要求 @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: {
/**
 * @description 附件自定义上传
 * @param file 上传的文件
 * @param insertFn 上传成功后的回调函数（插入到富文本编辑器中）
 * */
         uploadAttachment: {
            customUpload(file: File, insertFn: Function) {
			let formData = new FormData();
			formData.append("files", file);
			upload(formData).then(res => {   //upload是上传附件接口
				if (res.success) {
					console.log(res.data);       //defaultconfigUrl是接口地址             
					insertFn(`${res.data[0].fileName}`, defaultconfigUrl +      
                           res.data[0]!.fileUrl);
				}
			});
	    }
        
  }
};

//工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
  // 插入哪些菜单
  insertKeys: {
    index: 0, // 自定义插入的位置
    keys: ['uploadAttachment'], // “上传附件”菜单
  },

}

最后效果

最后

以上就是负责小笼包为你收集整理的WangEditor添加上传附件功能 vue3的全部内容，希望文章能够帮你解决WangEditor添加上传附件功能 vue3所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。