vue3+WangEfitor富文本编辑器应用-限制图片上传张数-限制大小

本文用到编辑器的自定义配置customUpload与insertFn

注意接口传参是表单形式的时候，接口的配置要有headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

小编的WangEfitor编辑器版本是

"@wangeditor/editor": "^5.1.23" ， "@wangeditor/editor-for-vue": "^5.1.12",

代码如下

<template>
  <div>
    <button @click="save()">保存</button>
    <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"
        @customPaste="czcustomPaste"
        :mode="mode"
        @onCreated="handleCreated"
        @onMaxLength = "onMaxLength"
      />
    </div>
  </div>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import { upLoadImg } from "@/api/business/ZnzzGcIntergratedPlan.js";//接口

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef(null);
// 内容 HTML
const valueHtml = ref("<p></p>");
const mode = ref("default");
const uploadedImageCount = ref(0); // 当前图片数量
const maxImageCount = 5; // 最大允许图片数量改为5
const loadingInstance = ref(null);

const toolbarConfig = ref({
  toolbarKeys: [
    'bulletedList',
    'numberedList', 
    'uploadImage',
  ]
});
const editorConfig = ref({
  placeholder:
    "请输入内容",
  MENU_CONF: {
    uploadImage: {
      // 禁用默认上传行为
      customUpload: async (file, insertFn) => {
        // 1. 验证逻辑
        if (uploadedImageCount.value >= maxImageCount) {
          proxy.$messageBox({
            title: "提示",
            message: "<strong>" + `最多允许上传 ${maxImageCount} 张图片` + "</strong>",
            dangerouslyUseHTMLString: true,
            showClose: false,
            closeOnClickModal:false,
            type: "warning",
            duration: 2000,
          });
          return; // 直接返回，不执行上传
        }
        if (((file.size * 1) / (1024 * 1024)).toFixed(5) > 15) {
          proxy.$messageBox({
            title: "提示",
            message: "<strong>" + `图片大小不能大于15M` + "</strong>",
            dangerouslyUseHTMLString: true,
            showClose: false,
            closeOnClickModal:false,
            type: "warning",
            duration: 2000,
          });
          return 
        }
        loadingInstance.value = ElLoading.service({
          lock: true,
          text: "图片上传中...",
          background: "rgba(0, 0, 0, 0.7)",
        });
        // 2. 执行上传
        const formData = new FormData();
        formData.append('file', file);
        
        try {
          const res = await upLoadImg(formData); // 此处换成你的接口
          insertFn(res.data.url); // 编辑器自带函数-插入图片
          loadingInstance.value.close();
        } catch (err) {
          ElMessage.error('上传失败');
          loadingInstance.value.close();
        }
      }
    },
  },
  hoverbarKeys: {
    link: {
      // 重写 link 元素的 hoverbar
      menuKeys: ["editLink"],
    },
    image: {
      // 清空 image 元素的 hoverbar
      menuKeys: [],
    },
    text: {
      menuKeys: [],
    },
  },
});
editorConfig.value.maxLength = 1500
function czcustomPaste (editor, event) {
  const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
  // 同步
  editor.insertText(text)
  // 阻止默认的粘贴行为
  event.preventDefault()
  return false
}
function onMaxLength (editor) {            // JS 语法
  proxy.$notify({
    title: "警告",
    message: "字数必须在 1000 个字符之内",
    type: "warning",
    duration: 2000,
  });
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (!editor) return;
  editor.destroy();
});
const isHandleButton = ref(false);
onMounted(() => {
  const savedValue = localStorage.getItem("isHandleButton");
  // 判断 savedValue 是否为空，并将其转换为布尔值
  isHandleButton.value = savedValue === "true"; // 注意：localStorage 存储的是字符串
});
const handleCreated = (editor) => {
  if (isHandleButton.value == false) {
    editor.enable();
  } else {
    editor.disable();
  }
  editorRef.value = editor; // 记录 editor 实例
  // 初始化时计算已有图片数量
  updateImageCount(editor);
  // 监听编辑器变化
  editor.on('change', () => {
    updateImageCount(editor);
  });
};
// 更新图片计数的方法
function updateImageCount(editor) {
  if (!editor) return;
  const html = editor.getHtml();
  const imgCount = (html.match(/<img/g) || []).length;
  uploadedImageCount.value = imgCount;
}
const save = () => {
  if (uploadedImageCount.value > maxImageCount) {
    proxy.$messageBox({
      title: "提示",
      message: "<strong>" + `请删除多余图片，最多允许 ${maxImageCount} 张` + "</strong>",
      dangerouslyUseHTMLString: true,
      showClose: false,
      closeOnClickModal:false,
      type: "warning",
      duration: 2000,
    });
    return;
  }
  const editor = editorRef.value;
  if(!editor.getText().trim()){
    console.log('内容wield空')
    return
  }
};
</script>

<style>

</style>