[{"data":1,"prerenderedAt":21},["ShallowReactive",2],{"$f3i8ga0icn81um":3},{"data":4},{"id":5,"slug":6,"title":7,"description":8,"category":9,"tags":10,"author":17,"image":8,"content":18,"publishedAt":19,"createdAt":20,"updatedAt":20},34,"yehangzhou\u002Fnotes\u002Fmd-editor-v3-upload-img-custom","如何修改md-editor-v3（版本：5.8.5）插件上传图片后返回的Markdown格式？",null,"notes",[11,12,13,14,15,16],"前端","图片上传","element-plus","md-editor-v3","ts","vue","yehangzhou","\r\nmd-editor-v3 上传图片返回的md文本原本是 `![](https:\u002F\u002Fxxxx.com\u002Fimg.png)`，想修改成 `[![](https:\u002F\u002Fxxxx.com\u002Fimg.png)](https:\u002F\u002Fxxxx.com\u002Fimg.png)` 的方法\r\n\r\n```vue\r\n\u003Ctemplate>\r\n  \u003CMdEditor\r\n    ref=\"mdEditorRef\"\r\n    v-model=\"content\"\r\n    :onUploadImg=\"handleUploadImage\"\r\n    preview-theme=\"github\"\r\n  \u002F>\r\n\u003C\u002Ftemplate>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport { ref } from 'vue'\r\nimport { MdEditor } from 'md-editor-v3'\r\nimport 'md-editor-v3\u002Flib\u002Fstyle.css'\r\nimport { ElLoading, ElMessage } from 'element-plus'\r\n\r\nconst content = ref('')\r\nconst mdEditorRef = ref\u003Cany>()\r\n\r\n\u002F\u002F 文件上传（未实现）\r\nconst uploadFile = async (file: File): Promise\u003Cstring> => {\r\n  let url: string = ''\r\n  \u002F\u002F 这里是文件上传逻辑\r\n\r\n  return url\r\n}\r\n\r\nconst handleUploadImage = async (files: File[], callback: (urls: string[]) => void) => {\r\n  const loading = ElLoading.service({ text: '正在上传，请稍等...' })\r\n  try {\r\n    const urls = await Promise.all(\r\n      files.map((file) => {\r\n        return uploadFile(file)\r\n      })\r\n    )\r\n\r\n    await mdEditorRef.value?.insert((selectedText: any) => {\r\n      \u002F**\r\n       * selectedText 是你在编辑器中用鼠标选中的文本\r\n       * 如果没选，它就是空字符串\r\n       *\u002F\r\n\r\n      \u002F\u002F 生成自定义格式\r\n      const imgMarkdown = urls.map((url) => `[![${selectedText}](${url})](${url})`).join('\\n')\r\n\r\n      return {\r\n        targetValue: imgMarkdown,\r\n        select: false,\r\n        deviationStart: 0,\r\n        deviationEnd: 0,\r\n      }\r\n    })\r\n\r\n    ElMessage.success(`成功上传 ${urls.length} 张图片`)\r\n    callback([]) \u002F\u002F 阻止编辑器自动插入\r\n  } catch (error) {\r\n    console.error('上传失败', error)\r\n    ElMessage.error('图片上传失败')\r\n    callback([]) \u002F\u002F 必须调用 callback\r\n  }\r\n\r\n  loading.close()\r\n}\r\n\u003C\u002Fscript>\r\n```\r\n","2026-07-01T15:57:26.000Z","2026-07-31T07:40:56.364Z",1785520929770]