How to use wangEditor5 in v3 + Upload pictures/videos/attachments function

Download the wangEditor5 plug-in in vue3, configure the upload attachment function for the plug-in, and encapsulate it into components for reuse on the page to obtain the user's updated data in real time.

html structure:

<template>
  <div
    style="border: 1px solid #ccc; max-width: calc(100vw - 355px)"
    v-loading="loading"
    element-loading-text="文件上传中..."
  >
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="{ height: height + 'px', overflowY: 'hidden' }"
      class="EditorDom"
      v-model="editValue"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

js basic introduction code:

import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { Boot } from "@wangeditor/editor";
import attachmentModule from "@wangeditor/plugin-upload-attachment";

const props = defineProps({
  height: {
    type: Number,
    default: 600,
  },
  mode: {
    default: "default",
    type: String,
  },
  editorConfig: {
    default: () => ({
      placeholder: "请输入内容...",
      MENU_CONF: {},
    }),
    type: Object,
  },
  modelValue: {
    required: true,
    type: String,
  },
  knwlgId: {
    required: true,
    type: String,
  },
});

const emits = defineEmits(["update:modelValue", "setHtml"]);

// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
 if (Boot.plugins.length < 13) {
   //判断如果已经插入进去，不在二次插入
   Boot.registerModule(attachmentModule);
 }

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

};

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const editValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emits("update:modelValue", value);
  },
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 内容改变
const handleChange = (editor) => {
  emits("setHtml", editor.getText(), editor.getHtml());
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  if (editorRef.value) {
    editorRef.value.destroy();
  }
});

//销毁dom
const distoryEditor = () => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
};

//实时更新数据
const setWangContent = (val) => {
  editorRef.value.setHtml(val);
};

upload picture:

// 图片上传设置
props.editorConfig.MENU_CONF["uploadImage"] = {
  // 服务端地址
  maxNumberOfFiles: 1,
  allowedFileTypes: ["image/*"],
  async customUpload(file, insertFn) {
    if (!file.type.includes("image")) {
      return proxy.$modal.msgError("请上传图片格式的文件");
    }
    if (file.size / 1024 / 1024 > 200) {
      return proxy.$modal.msgError("请上传200M以内的图片！");
    }
    const formData = new FormData();
    formData.append("file", file);
    loading.value = true;
    uploadImg(props.knwlgId, formData, formData)
      .then((res) => {
        loading.value = false;
        insertFn(
          import.meta.env.VITE_APP_BASE_API +
            res.data.imgId
        );
      })
      .catch(() => {
        loading.value = false;
      });
  },
};

Video upload:

// 视频上传
props.editorConfig.MENU_CONF["uploadVideo"] = {
  // 最多可上传几个文件，默认为 5
  maxNumberOfFiles: 1,
  async customUpload(file, insertFn) {
    // console.log(file, "customUpload");
    if (!file.type.includes("video")) {
      return proxy.$modal.msgError("请上传视频格式的文件！");
    } else if (file.size / 1024 / 1024 > 200) {
      return proxy.$modal.msgError("请上传200M以内的文件！");
    }
    // file 即选中的文件
    // 自己实现上传，并得到视频 url poster
    // 最后插入视频
    const formData = new FormData();
    formData.append("file", file);
    loading.value = true;
    uploadImg(formData)
      .then((res) => {
        loading.value = false;
        insertFn(res.data.url);
      })
      .catch(() => {
        loading.value = false;
      });
  },
};

Updating files:

// 附件上传
(props.editorConfig.MENU_CONF["uploadAttachment"] = {
  async customUpload(file, insertFn) {
    console.log(file, "uploadAttachment");
    if (file.size / 1024 / 1024 > 200) {
      return proxy.$modal.msgError("请上传200M以内的附件！");
    }
    const formData = new FormData();
    formData.append("file", file);
    loading.value = true;
    uploadImg(formData)
      .then((res) => {
        loading.value = false;
        insertFn(res.data.name, res.data.url);
      })
      .catch(() => {
        loading.value = false;
      });
  },
});