人称外号大脸猫

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

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

一、md-editor-v3核心优势

特性 说明 使用场景
现代化UI 清晰的双栏设计,多主题支持 博客系统、文档平台
图片上传 内置上传处理逻辑 内容管理系统
响应式布局 完美适配移动设备 多终端应用
高性能 Vue 3 Composition API优化 大型文档编辑

📦 二、安装与基础使用

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和强大的扩展性,能完美满足各种内容编辑需求。核心优势包括:

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

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

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

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

copyright ©2025 ahimu.com all rights reserved 皖ICP备19021547号-1