- 获取链接
- X
- 电子邮件
- 其他应用
- 获取链接
- X
- 电子邮件
- 其他应用
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>
评论
发表评论