如何修改md-editor-v3(版本:5.8.5)插件上传图片后返回的Markdown格式?

md-editor-v3 上传图片返回的md文本原本是 ![](https://xxxx.com/img.png),想修改成 [![](https://xxxx.com/img.png)](https://xxxx.com/img.png) 的方法

vue 复制代码
<template>
  <MdEditor
    ref="mdEditorRef"
    v-model="content"
    :onUploadImg="handleUploadImage"
    preview-theme="github"
  />
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {MdEditor} from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import {ElLoading, ElMessage} from "element-plus";

const content = ref('')
const mdEditorRef = ref<any>()

// 文件上传(未实现)
const uploadFile = async (file: File): Promise<string> => {
  let url: string = ''
  // 这里是文件上传逻辑

  return url
}

const handleUploadImage = async (files: File[], callback: (urls: string[]) => void) => {
  const loading = ElLoading.service({text: '正在上传,请稍等...'})
  try {
    const urls = await Promise.all(
      files.map((file) => {
        return uploadFile(file)
      }),
    )

    await mdEditorRef.value?.insert((selectedText: any) => {
      /**
       * selectedText 是你在编辑器中用鼠标选中的文本
       * 如果没选,它就是空字符串
       */

      // 生成自定义格式
      const imgMarkdown = urls.map((url) => `[![${selectedText}](${url})](${url})`).join('\n')

      return {
        targetValue: imgMarkdown,
        select: false,
        deviationStart: 0,
        deviationEnd: 0,
      }
    })

    ElMessage.success(`成功上传 ${urls.length} 张图片`)
    callback([]) // 阻止编辑器自动插入
  } catch (error) {
    console.error('上传失败', error)
    ElMessage.error('图片上传失败')
    callback([]) // 必须调用 callback
  }

  loading.close()
}
</script>

评论