wangEditor 上传附件插件使用教程

wangEditor 上传附件插件使用教程

项目地址:https://gitcode.com/gh_mirrors/wa/wangEditor-plugin-upload-attachment

项目介绍

wangEditor-plugin-upload-attachment 是一个为 wangEditor 富文本编辑器开发的插件，用于实现上传附件的功能。该插件允许用户在编辑器中直接上传文件，并将文件链接插入到编辑器内容中。通过该插件，用户可以方便地管理文档中的附件，提升编辑体验。

项目快速启动

安装

首先，使用 yarn 或 npm 安装插件：

yarn add @wangeditor/plugin-upload-attachment

或

npm install @wangeditor/plugin-upload-attachment

使用

在项目中引入并注册插件：

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

// 注册插件
Boot.registerModule(attachmentModule);

配置编辑器和工具栏：

import { IEditorConfig, IToolbarConfig } from '@wangeditor/editor';

const editorConfig: Partial<IEditorConfig> = {
  hoverbarKeys: {
    attachment: {
      menuKeys: ['downloadAttachment'],
    },
  },
  MENU_CONF: {
    uploadAttachment: {
      server: '/api/upload', // 服务端地址
      timeout: 5 * 1000, // 5s
      fieldName: 'custom-fileName',
      meta: { token: 'xxx', a: 100 },
      metaWithUrl: true,
      headers: { Accept: 'text/x-json' },
      maxFileSize: 10 * 1024 * 1024, // 10M
      onBeforeUpload(file: File) {
        console.log('onBeforeUpload', file);
        return file; // 上传 file 文件
      },
      onProgress(progress: number) {
        console.log('onProgress', progress);
      },
      onSuccess(file: File, res: any) {
        console.log('onSuccess', file, res);
      },
      onFailed(file: File, res: any) {
        alert(res.message);
        console.log('onFailed', file, res);
      },
      onError(file: File, err: Error, res: any) {
        alert(err.message);
        console.error('onError', file, err, res);
      },
      onInsertedAttachment(elem: AttachmentElement) {
        console.log('inserted attachment', elem);
      },
    },
  },
};

const toolbarConfig: Partial<IToolbarConfig> = {
  insertKeys: {
    index: 0,
    keys: ['uploadAttachment'],
  },
};

// 创建编辑器和工具栏
const editor = createEditor({
  selector: '#editor-container',
  config: editorConfig,
  toolbarConfig: toolbarConfig,
});

应用案例和最佳实践

案例一：企业内部文档管理系统

在企业内部文档管理系统中，用户需要上传和分享各种类型的文件，如PDF、Word文档、图片等。通过集成 wangEditor-plugin-upload-attachment，用户可以直接在编辑器中上传附件，并将附件链接插入到文档中。这不仅简化了文件管理流程，还提升了文档的可读性和可维护性。

案例二：在线教育平台

在线教育平台通常需要教师上传课件、作业等文件。通过使用该插件，教师可以在编辑课程内容时直接上传相关文件，并将文件链接插入到课程描述中。这使得课程内容更加丰富，同时也方便学生下载相关资料。

典型生态项目

wangEditor

wangEditor 是一个轻量级、易扩展的富文本编辑器，广泛应用于各种Web应用中。wangEditor-plugin-upload-attachment 作为其生态系统的一部分，为用户提供了上传附件的功能，进一步增强了编辑器的实用性。

其他插件

除了上传附件插件，wangEditor 还提供了多种其他插件，如图片上传、视频插入、表格编辑等。这些插件共同构成了一个功能丰富的编辑器生态系统，满足不同场景下的编辑需求。

通过以上步骤，您可以快速集成 wangEditor-plugin-upload-attachment 插件，并在实际项目中应用。希望本教程能帮助您更好地使用该插件，提升开发效率。

wangEditor-plugin-upload-attachment wangEditor upload-attachments plugin 项目地址: https://gitcode.com/gh_mirrors/wa/wangEditor-plugin-upload-attachment