六、上传功能配置

6.1 图片上传配置
Vditor 支持图片拖拽、粘贴和工具栏按钮上传，可配置上传接口。

const vditor = new Vditor('vditor', {
    upload: {
        url: '/api/upload',           // 上传接口地址
        fieldName: 'file',            // 文件字段名
        accept: 'image/*',            // 接受的文件类型
        multiple: true,               // 是否支持多文件上传
        linkToImgUrl: '/api/fetch',   // URL 转图片地址
        token: 'your-upload-token',   // 鉴权 token
        withCredentials: true,        // 是否携带 cookie

        // 文件重命名
        filename: (name) => {
            return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '')
                .replace(/[\\/:*?"<>|]/g, '');
        },

        // 上传前校验
        validate: (files) => {
            const maxSize = 5 * 1024 * 1024;  // 5MB
            for (let file of files) {
                if (file.size > maxSize) {
                    alert('文件大小不能超过 5MB');
                    return false;
                }
            }
            return true;
        },

        // 格式化上传响应
        format: (files, responseText) => {
            const res = JSON.parse(responseText);
            const result = {
                code: 0,
                data: {
                    errFiles: [],
                    succMap: {}
                }
            };

            for (let file of files) {
                if (res.code === 0) {
                    result.data.succMap[file.name] = res.data.url;
                } else {
                    result.data.errFiles.push(file.name);
                }
            }
            return JSON.stringify(result);
        },

        // 上传进度回调
        progress: (percent) => {
            console.log(`上传进度: ${percent}%`);
        },

        // 上传成功回调
        success: (responseText) => {
            console.log('上传成功', responseText);
        },

        // 上传失败回调
        error: (error) => {
            console.error('上传失败', error);
        }
    }
});

6.2 上传接口响应格式
上传接口需要返回特定的 JSON 格式：

{
    "code": 0,
    "data": {
        "errFiles": ["failed.jpg"],
        "succMap": {
            "success.jpg": "https://example.com/images/success.jpg"
        }
    }
}

七、高级功能

7.1 图表与流程图支持
Vditor 通过集成 Mermaid、ECharts 等引擎，支持多种图表渲染。
https://hllft.cn
Mermaid 流程图示例：

```mermaid
graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[结束]

ECharts 图表示例：

{
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{ type: 'line', data: [120, 200, 150] }]
}

7.2 数学公式渲染

行内公式：$E = mc^2$

块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

配置数学公式支持：

const vditor = new Vditor('vditor', {
    math: {
        engine: 'KaTeX',   // 或 'MathJax'
        inlineDigit: true
    }
});

7.3 Markdown 预览与渲染
如果只需要展示 Markdown 内容而不需要编辑功能，可以使用 Vditor.preview 方法。

import VditorPreview from 'vditor/dist/method.min';

// 方式一：直接预览
VditorPreview.preview(document.getElementById('preview'), markdownContent, {
    theme: {
        current: 'light'
    },
    hljs: {
        style: 'github',
        lineNumber: true
    },
    math: {
        engine: 'KaTeX'
    }
});

// 方式二：使用 md2html 转换
import { md2html } from 'vditor';

const html = await md2html(markdownText, {
    math: { engine: 'KaTeX' },
    highlight: true
});
document.getElementById('content').innerHTML = html;

7.4 内容转换与图片处理
通过 transform 回调可以在渲染前对 HTML 进行自定义处理：

VditorPreview.preview(document.getElementById('preview'), markdown, {
    transform: (html) => {
        // 图片居中并添加题注
        return html.replace(
            /<img\s+[^>]*src="([^"]+)"\s*alt="([^"]*)"[^>]*>/g,
            (match, src, alt) => {
                return `
                    <div style="text-align: center;">
                        <img src="${src}" alt="${alt}" style="max-width: 100%;">
                        <p class="image-caption">${alt}</p>
                    </div>
                `;
            }
        );
    }
});

7.5 离线使用配置
在需要离线使用的场景中（如内网环境），需要配置 CDN 为空并自托管资源文件。

import Vditor from 'vditor';
import 'vditor/dist/index.css';

// 复制 node_modules/vditor/dist 到 public 目录

const vditor = new Vditor('vditor', {
    cdn: '',  // 关键：设置为空字符串，使用本地资源
    height: 500,
    mode: 'ir'
});

八、性能优化与最佳实践

8.1 资源优化
按需加载：Vditor 默认会加载所有功能模块，可以通过配置只加载需要的模块。在生产环境中，建议将 node_modules/vditor/dist 复制到静态资源目录并配置 CDN 为空后，删除不需要的组件源码（如流程图渲染等）以减小打包体积。

// vite.config.js 中的优化配置
import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                manualChunks: {
                    vditor: ['vditor']
                }
            }
        }
    },
    server: {
        fs: {
            allow: ['..']
        }
    }
});

懒加载编辑器：

<template>
    <div v-if="editorVisible" id="vditor-container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const editorVisible = ref(false);

const loadEditor = async () => {
    const Vditor = (await import('vditor')).default;
    await import('vditor/dist/index.css');

    new Vditor('vditor-container', {
        height: 500
    });
};

onMounted(() => {
    // 延迟加载编辑器
    setTimeout(() => {
        editorVisible.value = true;
        loadEditor();
    }, 1000);
});
</script>

8.2 实时保存与防抖

let saveTimer = null;

const vditor = new Vditor('vditor', {
    input: (value) => {
        // 防抖保存，避免频繁请求
        if (saveTimer) clearTimeout(saveTimer);
        saveTimer = setTimeout(() => {
            localStorage.setItem('document-content', value);
            console.log('草稿已保存');
        }, 1000);
    },
    blur: (value) => {
        // 失焦时立即保存
        saveToBackend(value);
    }
});

Vditor 以其三种编辑模式、丰富的扩展功能、多框架支持和高度可定制的特性，成为浏览器端 Markdown 编辑器的优秀选择。