md-editor-v3使用教程：Vue 3中的Markdown编辑利器

本文将手把手教你如何在 Vue 3 项目中集成功能强大的 Markdown 编辑器 md-editor-v3，并实现自定义图片上传功能。以下是完整的实现步骤和代码分析。

一、md-editor-v3核心优势

📦 二、安装与基础使用

1. 安装依赖

npm install md-editor-v3
# 或
yarn add md-editor-v3

2. 组件基础结构

<script setup>
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

// 双向绑定 Markdown 内容
const content = defineModel({
  default: '',
  type: String,
  required: true,
});
</script>

<template>
  <MdEditor v-model="content" previewTheme="github" />
</template>

🖼️ 三、实现图片上传功能

关键代码解析 ( 部分

<script setup>
import { Message } from "@arco-design/web-vue";
import http from "@/lib/http"; // 项目中的 HTTP 库（如 Axios）
import { route } from "ziggy-js"; // 路由工具（可替换为 vue-router）

// 1. 获取 CSRF Token（Laravel 项目需配置）
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

// 2. 单个图片上传方法
const uploadSingleImage = async (file) => {
  const formData = new FormData();
  formData.append('file', file);
  
  try {
    const res = await http.post(
      route('admin.upload.image'), // 后端图片上传接口
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data',
          'X-CSRF-TOKEN': csrfToken // 传递 CSRF Token
        }
      }
    );
    return res.data.url; // 返回图片 URL
  } catch (err) {
    console.error(`文件 ${file.name} 上传失败:`, err);
    Message.error(`上传失败: ${err.message}`);
    return null;
  }
};

// 3. 处理编辑器中的图片上传事件
const onUploadImg = async (files, callback) => {
  try {
    const imageUrls = await Promise.all(
      Array.from(files).map(file => uploadSingleImage(file))
    );
    callback(imageUrls.filter(url => url !== null)); // 将有效 URL 回传给编辑器
  } catch (err) {
    Message.error('批量上传失败');
  }
};
</script>

模板中使用

<template>
  <MdEditor 
    v-model="content" 
    previewTheme="github"
    @onUploadImg="onUploadImg" <!-- 绑定图片上传事件 -->
  />
</template>

四、进阶配置指南

主题切换

<MdEditor 
  v-model="content"
  :previewTheme="currentTheme" 
/>

// 可选主题: default, github, vuepress, mk-cute

工具栏自定义

const toolbars = [
  'bold', 'underline', 'italic', 'strikeThrough',
  'image', 'code', 'table', 'revoke', 'next'
];

<MdEditor :toolbars="toolbars" />

样式定制

/* 全局样式覆盖 */
:root {
 --md-bk-color: #f8fafc;
 --md-toolbar-bg-color: #1e5799;
 --md-toolbar-color: #fff;
 --md-border-color: #e1e4e8;
}

md-editor-v3作为Vue 3生态中优秀的Markdown编辑器，通过其简洁的API和强大的扩展性，能完美满足各种内容编辑需求。核心优势包括：

• 开箱即用：五分钟完成集成

• 高度可定制：主题/工具栏灵活配置

• 企业级功能：完善的图片上传方案

• 响应式设计：移动端友好体验