如何修改md-editor-v3(版本:5.8.5)插件上传图片后返回的Markdown格式?
md-editor-v3 上传图片返回的md文本原本是 ,想修改成 [](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) => `[](${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>