上传附件

安装

pnpm install @wangeditor/plugin-upload-attachment -S

注意

1. 使用插件必须要求 @wangeditor/editor 版本 >=5.1.16

效果预览

流程

注意

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

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

代码

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
  <button @click="getcontent">提交</button>
</template>

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { Boot, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
import attachmentModule from "@wangeditor/plugin-upload-attachment";
// 编辑器实例,必须用shallowRef包裹

const editorRef = shallowRef();

// 内容HTML

const valueHtml = ref("<p>hello</p>");

// 编辑器模式

const mode = ref("simple"); // simple或者default;

// 模拟ajax异步获取数据内容

onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  }, 1500);
});

// 工具栏配置

const toolbarConfig = {
  // 插入哪些菜单
  insertKeys: {
    index: 0, // 自定义插入的位置
    keys: ["uploadAttachment"], // “上传附件”菜单
  },
};

// 工具栏配置

// 编辑器配置

const editorConfig = {
  placeholder: "请输入内容...",
  hoverbarKeys: {
    attachment: {
      menuKeys: ["downloadAttachment"], // “下载附件”菜单
    },
  },
  MENU_CONF: {
    // “上传附件”菜单的配置
    uploadAttachment: {
      // 是否跨域传输

      withCredentials: false,

      // 单个文件的最大体积限制，默认为 10M

      maxFileSize: 100 * 1024 * 1024, // 5M

      // 视频上传地址

      server: "https://newapidev.dianyuan.com/admin/factory/general/uploadFile",

      // 超时时间
      timeout: 30 * 1000, // 5s

      // form-data fieldName ，默认值 'wangeditor-uploaded-image'

      fieldName: `file`,

      // 额外的字段

      meta: {
        module: "community",
      },

      // 头部参数

      headers: {
        "access-token":
          "1wuDp%2FyTmMf%2BWsYw4ymTit%2BxsmrOMzLqXYepM261jXgfVa9%2BCVhkjg1Mm%2B6wDmua",
      },

      // 上传之前触发
      onBeforeUpload(file: File) {
        // TS 语法
        // onBeforeUpload(file) {      // JS 语法
        // file 选中的文件，格式如 { key: file }
        return file;

        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
      },

      // 上传进度的回调函数
      onProgress(progress: number) {
        // TS 语法
        // onProgress(progress) {       // JS 语法
        // progress 是 0-100 的数字
        console.log("progress", progress);
      },

      // 单个文件上传成功之后
      onSuccess(file: File, res: any) {
        // TS 语法
        // onSuccess(file, res) {          // JS 语法
        console.log(`${file.name} 上传成功`, res);
      },

      // 单个文件上传失败
      onFailed(file: File, res: any) {
        // TS 语法
        // onFailed(file, res) {          // JS 语法
        console.log(`${file.name} 上传失败`, res);
      },

      // 上传错误，或者触发 timeout 超时
      onError(file: File, err: any, res: any) {
        // TS 语法
        // onError(file, err, res) {               // JS 语法
        console.log(`${file.name} 上传出错`, err, res);
      },

      // 自定义上传视频

      customInsert(res: any, file: any, insertFn: any) {
        // TS 语法
        // customInsert(res, insertFn) {
        // res 即服务端的返回结果
        console.log(res);
        console.log("---------");
        console.log(file.name);
        console.log("***********");
        const imgInfo = res.data || {};
        const { path, path_real } = imgInfo;
        if (!path_real) throw new Error(`Video url is empty`);
        insertFn(`${file.name}`, path_real);
        // 从 res 中找到 url poster ，然后插入视频
        // insertFn(url, poster);
      },

      // // 用户自定义上传
      // customUpload(file: File, insertFn: Function) {
      //   console.log('customUpload', file)

      //   return new Promise(resolve => {
      //     // 插入一个文件，模拟异步
      //     setTimeout(() => {
      //       const src = `https://www.w3school.com.cn/i/movie.ogg`
      //       insertFn(`customUpload-${file.name}`, src)
      //       resolve('ok')
      //     }, 500)
      //   })
      // },

      // // 自定义选择
      // customBrowseAndUpload(insertFn: Function) {
      //   alert('自定义选择文件，如弹出图床')
      //   // 自己上传文件
      //   // 上传之后用 insertFn(fileName, link) 插入到编辑器
      // },

      // 插入到编辑器后的回调
      onInsertedAttachment(elem: any) {
        console.log("inserted attachment", elem);
      },
    },
  },
};

// 组件销毁的时候,也即时 销毁编辑器

onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 编辑器示例

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录editor实例
};

// 获取到编辑器内容

const getcontent = () => {
  window.alert(valueHtml.value);
};

// 注册
Boot.registerModule(attachmentModule);
</script>

<style scoped lang="scss"></style>