[{"data":1,"prerenderedAt":858},["ShallowReactive",2],{"article-md-editor-v3-upload-img-custom":3},{"id":4,"title":5,"body":6,"date":844,"description":28,"extension":845,"meta":846,"navigation":124,"path":853,"rawbody":854,"seo":855,"stem":856,"__hash__":857},"content\u002Fyehangzhou\u002Fposts\u002Fmd-editor-v3-upload-img-custom.md","如何修改md-editor-v3（版本：5.8.5）插件上传图片后返回的Markdown格式？",{"type":7,"value":8,"toc":842},"minimark",[9,22,838],[10,11,12,13,17,18,21],"p",{},"md-editor-v3 上传图片返回的md文本原本是 ",[14,15,16],"code",{},"![](https:\u002F\u002Fxxxx.com\u002Fimg.png)","，想修改成 ",[14,19,20],{},"[![](https:\u002F\u002Fxxxx.com\u002Fimg.png)](https:\u002F\u002Fxxxx.com\u002Fimg.png)"," 的方法",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003CMdEditor\n    ref=\"mdEditorRef\"\n    v-model=\"content\"\n    :onUploadImg=\"handleUploadImage\"\n    preview-theme=\"github\"\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { MdEditor } from 'md-editor-v3'\nimport 'md-editor-v3\u002Flib\u002Fstyle.css'\nimport { ElLoading, ElMessage } from 'element-plus'\n\nconst content = ref('')\nconst mdEditorRef = ref\u003Cany>()\n\n\u002F\u002F 文件上传（未实现）\nconst uploadFile = async (file: File): Promise\u003Cstring> => {\n  let url: string = ''\n  \u002F\u002F 这里是文件上传逻辑\n\n  return url\n}\n\nconst handleUploadImage = async (files: File[], callback: (urls: string[]) => void) => {\n  const loading = ElLoading.service({ text: '正在上传，请稍等...' })\n  try {\n    const urls = await Promise.all(\n      files.map((file) => {\n        return uploadFile(file)\n      })\n    )\n\n    await mdEditorRef.value?.insert((selectedText: any) => {\n      \u002F**\n       * selectedText 是你在编辑器中用鼠标选中的文本\n       * 如果没选，它就是空字符串\n       *\u002F\n\n      \u002F\u002F 生成自定义格式\n      const imgMarkdown = urls.map((url) => `[![${selectedText}](${url})](${url})`).join('\\n')\n\n      return {\n        targetValue: imgMarkdown,\n        select: false,\n        deviationStart: 0,\n        deviationEnd: 0,\n      }\n    })\n\n    ElMessage.success(`成功上传 ${urls.length} 张图片`)\n    callback([]) \u002F\u002F 阻止编辑器自动插入\n  } catch (error) {\n    console.error('上传失败', error)\n    ElMessage.error('图片上传失败')\n    callback([]) \u002F\u002F 必须调用 callback\n  }\n\n  loading.close()\n}\n\u003C\u002Fscript>\n","vue","",[14,30,31,47,56,70,81,92,103,109,119,126,147,163,176,184,197,202,227,247,252,259,307,326,332,337,346,352,357,410,436,444,469,489,500,506,512,517,545,551,557,563,569,574,580,641,646,654,660,672,683,693,699,705,710,736,748,760,777,791,801,807,812,824,829],{"__ignoreMap":28},[32,33,36,40,44],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"sVt8B","\u003C",[32,41,43],{"class":42},"s9eBZ","template",[32,45,46],{"class":38},">\n",[32,48,50,53],{"class":34,"line":49},2,[32,51,52],{"class":38},"  \u003C",[32,54,55],{"class":42},"MdEditor\n",[32,57,59,63,66],{"class":34,"line":58},3,[32,60,62],{"class":61},"sScJk","    ref",[32,64,65],{"class":38},"=",[32,67,69],{"class":68},"sZZnC","\"mdEditorRef\"\n",[32,71,73,76,78],{"class":34,"line":72},4,[32,74,75],{"class":61},"    v-model",[32,77,65],{"class":38},[32,79,80],{"class":68},"\"content\"\n",[32,82,84,87,89],{"class":34,"line":83},5,[32,85,86],{"class":61},"    :onUploadImg",[32,88,65],{"class":38},[32,90,91],{"class":68},"\"handleUploadImage\"\n",[32,93,95,98,100],{"class":34,"line":94},6,[32,96,97],{"class":61},"    preview-theme",[32,99,65],{"class":38},[32,101,102],{"class":68},"\"github\"\n",[32,104,106],{"class":34,"line":105},7,[32,107,108],{"class":38},"  \u002F>\n",[32,110,112,115,117],{"class":34,"line":111},8,[32,113,114],{"class":38},"\u003C\u002F",[32,116,43],{"class":42},[32,118,46],{"class":38},[32,120,122],{"class":34,"line":121},9,[32,123,125],{"emptyLinePlaceholder":124},true,"\n",[32,127,129,131,134,137,140,142,145],{"class":34,"line":128},10,[32,130,39],{"class":38},[32,132,133],{"class":42},"script",[32,135,136],{"class":61}," setup",[32,138,139],{"class":61}," lang",[32,141,65],{"class":38},[32,143,144],{"class":68},"\"ts\"",[32,146,46],{"class":38},[32,148,150,154,157,160],{"class":34,"line":149},11,[32,151,153],{"class":152},"szBVR","import",[32,155,156],{"class":38}," { ref } ",[32,158,159],{"class":152},"from",[32,161,162],{"class":68}," 'vue'\n",[32,164,166,168,171,173],{"class":34,"line":165},12,[32,167,153],{"class":152},[32,169,170],{"class":38}," { MdEditor } ",[32,172,159],{"class":152},[32,174,175],{"class":68}," 'md-editor-v3'\n",[32,177,179,181],{"class":34,"line":178},13,[32,180,153],{"class":152},[32,182,183],{"class":68}," 'md-editor-v3\u002Flib\u002Fstyle.css'\n",[32,185,187,189,192,194],{"class":34,"line":186},14,[32,188,153],{"class":152},[32,190,191],{"class":38}," { ElLoading, ElMessage } ",[32,193,159],{"class":152},[32,195,196],{"class":68}," 'element-plus'\n",[32,198,200],{"class":34,"line":199},15,[32,201,125],{"emptyLinePlaceholder":124},[32,203,205,208,212,215,218,221,224],{"class":34,"line":204},16,[32,206,207],{"class":152},"const",[32,209,211],{"class":210},"sj4cs"," content",[32,213,214],{"class":152}," =",[32,216,217],{"class":61}," ref",[32,219,220],{"class":38},"(",[32,222,223],{"class":68},"''",[32,225,226],{"class":38},")\n",[32,228,230,232,235,237,239,241,244],{"class":34,"line":229},17,[32,231,207],{"class":152},[32,233,234],{"class":210}," mdEditorRef",[32,236,214],{"class":152},[32,238,217],{"class":61},[32,240,39],{"class":38},[32,242,243],{"class":210},"any",[32,245,246],{"class":38},">()\n",[32,248,250],{"class":34,"line":249},18,[32,251,125],{"emptyLinePlaceholder":124},[32,253,255],{"class":34,"line":254},19,[32,256,258],{"class":257},"sJ8bj","\u002F\u002F 文件上传（未实现）\n",[32,260,262,264,267,269,272,275,279,282,285,288,290,293,295,298,301,304],{"class":34,"line":261},20,[32,263,207],{"class":152},[32,265,266],{"class":61}," uploadFile",[32,268,214],{"class":152},[32,270,271],{"class":152}," async",[32,273,274],{"class":38}," (",[32,276,278],{"class":277},"s4XuR","file",[32,280,281],{"class":152},":",[32,283,284],{"class":61}," File",[32,286,287],{"class":38},")",[32,289,281],{"class":152},[32,291,292],{"class":61}," Promise",[32,294,39],{"class":38},[32,296,297],{"class":210},"string",[32,299,300],{"class":38},"> ",[32,302,303],{"class":152},"=>",[32,305,306],{"class":38}," {\n",[32,308,310,313,316,318,321,323],{"class":34,"line":309},21,[32,311,312],{"class":152},"  let",[32,314,315],{"class":38}," url",[32,317,281],{"class":152},[32,319,320],{"class":210}," string",[32,322,214],{"class":152},[32,324,325],{"class":68}," ''\n",[32,327,329],{"class":34,"line":328},22,[32,330,331],{"class":257},"  \u002F\u002F 这里是文件上传逻辑\n",[32,333,335],{"class":34,"line":334},23,[32,336,125],{"emptyLinePlaceholder":124},[32,338,340,343],{"class":34,"line":339},24,[32,341,342],{"class":152},"  return",[32,344,345],{"class":38}," url\n",[32,347,349],{"class":34,"line":348},25,[32,350,351],{"class":38},"}\n",[32,353,355],{"class":34,"line":354},26,[32,356,125],{"emptyLinePlaceholder":124},[32,358,360,362,365,367,369,371,374,376,378,381,384,386,388,391,393,395,398,400,403,406,408],{"class":34,"line":359},27,[32,361,207],{"class":152},[32,363,364],{"class":61}," handleUploadImage",[32,366,214],{"class":152},[32,368,271],{"class":152},[32,370,274],{"class":38},[32,372,373],{"class":277},"files",[32,375,281],{"class":152},[32,377,284],{"class":61},[32,379,380],{"class":38},"[], ",[32,382,383],{"class":61},"callback",[32,385,281],{"class":152},[32,387,274],{"class":38},[32,389,390],{"class":277},"urls",[32,392,281],{"class":152},[32,394,320],{"class":210},[32,396,397],{"class":38},"[]) ",[32,399,303],{"class":152},[32,401,402],{"class":210}," void",[32,404,405],{"class":38},") ",[32,407,303],{"class":152},[32,409,306],{"class":38},[32,411,413,416,419,421,424,427,430,433],{"class":34,"line":412},28,[32,414,415],{"class":152},"  const",[32,417,418],{"class":210}," loading",[32,420,214],{"class":152},[32,422,423],{"class":38}," ElLoading.",[32,425,426],{"class":61},"service",[32,428,429],{"class":38},"({ text: ",[32,431,432],{"class":68},"'正在上传，请稍等...'",[32,434,435],{"class":38}," })\n",[32,437,439,442],{"class":34,"line":438},29,[32,440,441],{"class":152},"  try",[32,443,306],{"class":38},[32,445,447,450,453,455,458,460,463,466],{"class":34,"line":446},30,[32,448,449],{"class":152},"    const",[32,451,452],{"class":210}," urls",[32,454,214],{"class":152},[32,456,457],{"class":152}," await",[32,459,292],{"class":210},[32,461,462],{"class":38},".",[32,464,465],{"class":61},"all",[32,467,468],{"class":38},"(\n",[32,470,472,475,478,481,483,485,487],{"class":34,"line":471},31,[32,473,474],{"class":38},"      files.",[32,476,477],{"class":61},"map",[32,479,480],{"class":38},"((",[32,482,278],{"class":277},[32,484,405],{"class":38},[32,486,303],{"class":152},[32,488,306],{"class":38},[32,490,492,495,497],{"class":34,"line":491},32,[32,493,494],{"class":152},"        return",[32,496,266],{"class":61},[32,498,499],{"class":38},"(file)\n",[32,501,503],{"class":34,"line":502},33,[32,504,505],{"class":38},"      })\n",[32,507,509],{"class":34,"line":508},34,[32,510,511],{"class":38},"    )\n",[32,513,515],{"class":34,"line":514},35,[32,516,125],{"emptyLinePlaceholder":124},[32,518,520,523,526,529,531,534,536,539,541,543],{"class":34,"line":519},36,[32,521,522],{"class":152},"    await",[32,524,525],{"class":38}," mdEditorRef.value?.",[32,527,528],{"class":61},"insert",[32,530,480],{"class":38},[32,532,533],{"class":277},"selectedText",[32,535,281],{"class":152},[32,537,538],{"class":210}," any",[32,540,405],{"class":38},[32,542,303],{"class":152},[32,544,306],{"class":38},[32,546,548],{"class":34,"line":547},37,[32,549,550],{"class":257},"      \u002F**\n",[32,552,554],{"class":34,"line":553},38,[32,555,556],{"class":257},"       * selectedText 是你在编辑器中用鼠标选中的文本\n",[32,558,560],{"class":34,"line":559},39,[32,561,562],{"class":257},"       * 如果没选，它就是空字符串\n",[32,564,566],{"class":34,"line":565},40,[32,567,568],{"class":257},"       *\u002F\n",[32,570,572],{"class":34,"line":571},41,[32,573,125],{"emptyLinePlaceholder":124},[32,575,577],{"class":34,"line":576},42,[32,578,579],{"class":257},"      \u002F\u002F 生成自定义格式\n",[32,581,583,586,589,591,594,596,598,601,603,605,608,610,613,615,618,620,623,626,629,631,634,637,639],{"class":34,"line":582},43,[32,584,585],{"class":152},"      const",[32,587,588],{"class":210}," imgMarkdown",[32,590,214],{"class":152},[32,592,593],{"class":38}," urls.",[32,595,477],{"class":61},[32,597,480],{"class":38},[32,599,600],{"class":277},"url",[32,602,405],{"class":38},[32,604,303],{"class":152},[32,606,607],{"class":68}," `[![${",[32,609,533],{"class":38},[32,611,612],{"class":68},"}](${",[32,614,600],{"class":38},[32,616,617],{"class":68},"})](${",[32,619,600],{"class":38},[32,621,622],{"class":68},"})`",[32,624,625],{"class":38},").",[32,627,628],{"class":61},"join",[32,630,220],{"class":38},[32,632,633],{"class":68},"'",[32,635,636],{"class":210},"\\n",[32,638,633],{"class":68},[32,640,226],{"class":38},[32,642,644],{"class":34,"line":643},44,[32,645,125],{"emptyLinePlaceholder":124},[32,647,649,652],{"class":34,"line":648},45,[32,650,651],{"class":152},"      return",[32,653,306],{"class":38},[32,655,657],{"class":34,"line":656},46,[32,658,659],{"class":38},"        targetValue: imgMarkdown,\n",[32,661,663,666,669],{"class":34,"line":662},47,[32,664,665],{"class":38},"        select: ",[32,667,668],{"class":210},"false",[32,670,671],{"class":38},",\n",[32,673,675,678,681],{"class":34,"line":674},48,[32,676,677],{"class":38},"        deviationStart: ",[32,679,680],{"class":210},"0",[32,682,671],{"class":38},[32,684,686,689,691],{"class":34,"line":685},49,[32,687,688],{"class":38},"        deviationEnd: ",[32,690,680],{"class":210},[32,692,671],{"class":38},[32,694,696],{"class":34,"line":695},50,[32,697,698],{"class":38},"      }\n",[32,700,702],{"class":34,"line":701},51,[32,703,704],{"class":38},"    })\n",[32,706,708],{"class":34,"line":707},52,[32,709,125],{"emptyLinePlaceholder":124},[32,711,713,716,719,721,724,726,728,731,734],{"class":34,"line":712},53,[32,714,715],{"class":38},"    ElMessage.",[32,717,718],{"class":61},"success",[32,720,220],{"class":38},[32,722,723],{"class":68},"`成功上传 ${",[32,725,390],{"class":38},[32,727,462],{"class":68},[32,729,730],{"class":210},"length",[32,732,733],{"class":68},"} 张图片`",[32,735,226],{"class":38},[32,737,739,742,745],{"class":34,"line":738},54,[32,740,741],{"class":61},"    callback",[32,743,744],{"class":38},"([]) ",[32,746,747],{"class":257},"\u002F\u002F 阻止编辑器自动插入\n",[32,749,751,754,757],{"class":34,"line":750},55,[32,752,753],{"class":38},"  } ",[32,755,756],{"class":152},"catch",[32,758,759],{"class":38}," (error) {\n",[32,761,763,766,769,771,774],{"class":34,"line":762},56,[32,764,765],{"class":38},"    console.",[32,767,768],{"class":61},"error",[32,770,220],{"class":38},[32,772,773],{"class":68},"'上传失败'",[32,775,776],{"class":38},", error)\n",[32,778,780,782,784,786,789],{"class":34,"line":779},57,[32,781,715],{"class":38},[32,783,768],{"class":61},[32,785,220],{"class":38},[32,787,788],{"class":68},"'图片上传失败'",[32,790,226],{"class":38},[32,792,794,796,798],{"class":34,"line":793},58,[32,795,741],{"class":61},[32,797,744],{"class":38},[32,799,800],{"class":257},"\u002F\u002F 必须调用 callback\n",[32,802,804],{"class":34,"line":803},59,[32,805,806],{"class":38},"  }\n",[32,808,810],{"class":34,"line":809},60,[32,811,125],{"emptyLinePlaceholder":124},[32,813,815,818,821],{"class":34,"line":814},61,[32,816,817],{"class":38},"  loading.",[32,819,820],{"class":61},"close",[32,822,823],{"class":38},"()\n",[32,825,827],{"class":34,"line":826},62,[32,828,351],{"class":38},[32,830,832,834,836],{"class":34,"line":831},63,[32,833,114],{"class":38},[32,835,133],{"class":42},[32,837,46],{"class":38},[839,840,841],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":28,"searchDepth":49,"depth":49,"links":843},[],"2026-07-01 15:57:26","md",{"tags":847,"image":28},[848,849,850,851,852,27],"前端","图片上传","element-plus","md-editor-v3","ts","\u002Fyehangzhou\u002Fposts\u002Fmd-editor-v3-upload-img-custom","---\ntitle: '如何修改md-editor-v3（版本：5.8.5）插件上传图片后返回的Markdown格式？'\ndescription: ''\ndate: 2026-07-01 15:57:26\ntags: ['前端', '图片上传', 'element-plus', 'md-editor-v3', 'ts', 'vue']\nimage: ''\n---\n\nmd-editor-v3 上传图片返回的md文本原本是 `![](https:\u002F\u002Fxxxx.com\u002Fimg.png)`，想修改成 `[![](https:\u002F\u002Fxxxx.com\u002Fimg.png)](https:\u002F\u002Fxxxx.com\u002Fimg.png)` 的方法\n\n```vue\n\u003Ctemplate>\n  \u003CMdEditor\n    ref=\"mdEditorRef\"\n    v-model=\"content\"\n    :onUploadImg=\"handleUploadImage\"\n    preview-theme=\"github\"\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { MdEditor } from 'md-editor-v3'\nimport 'md-editor-v3\u002Flib\u002Fstyle.css'\nimport { ElLoading, ElMessage } from 'element-plus'\n\nconst content = ref('')\nconst mdEditorRef = ref\u003Cany>()\n\n\u002F\u002F 文件上传（未实现）\nconst uploadFile = async (file: File): Promise\u003Cstring> => {\n  let url: string = ''\n  \u002F\u002F 这里是文件上传逻辑\n\n  return url\n}\n\nconst handleUploadImage = async (files: File[], callback: (urls: string[]) => void) => {\n  const loading = ElLoading.service({ text: '正在上传，请稍等...' })\n  try {\n    const urls = await Promise.all(\n      files.map((file) => {\n        return uploadFile(file)\n      })\n    )\n\n    await mdEditorRef.value?.insert((selectedText: any) => {\n      \u002F**\n       * selectedText 是你在编辑器中用鼠标选中的文本\n       * 如果没选，它就是空字符串\n       *\u002F\n\n      \u002F\u002F 生成自定义格式\n      const imgMarkdown = urls.map((url) => `[![${selectedText}](${url})](${url})`).join('\\n')\n\n      return {\n        targetValue: imgMarkdown,\n        select: false,\n        deviationStart: 0,\n        deviationEnd: 0,\n      }\n    })\n\n    ElMessage.success(`成功上传 ${urls.length} 张图片`)\n    callback([]) \u002F\u002F 阻止编辑器自动插入\n  } catch (error) {\n    console.error('上传失败', error)\n    ElMessage.error('图片上传失败')\n    callback([]) \u002F\u002F 必须调用 callback\n  }\n\n  loading.close()\n}\n\u003C\u002Fscript>\n```\n",{"title":5,"description":28},"yehangzhou\u002Fposts\u002Fmd-editor-v3-upload-img-custom","7iBng5toQlQ7cBFI8YzWi6aC33rMb3d06OK9EDEE5Tk",1784926473699]