Vue3 首选 Markdown 编辑器：md-editor-v3 详解-马育民老师

# 介绍

**官网**：https://github.com/imzbf/md-editor-v3
**预览**：https://imzbf.github.io/md-editor-v3/en-US
**作者**：imzbf
**技术栈**：Vue3 + TypeScript + Vite
**支持版本**：仅适配 **Vue3**，不支持 Vue2
**包体积**：轻量精简，打包体积小，预览模式极致轻量化
**更新状态**：长期活跃维护，持续迭代功能、修复BUG
**定位**：高颜值、功能齐全、高性能 **Markdown 编辑器 + 预览器** 一体化组件

### 特点
1. **双模式自由切换**
   - 编辑模式：完整 Markdown 在线编辑
   - 预览模式：`preview-only` 只读纯预览，剔除所有编辑逻辑，性能拉满
2. **强大代码高亮**
   - 内置 Prism.js 高亮引擎，无需额外引入
   - 支持百余种编程语言自动识别高亮
   - 自带**行号显示、一键复制代码**
3. **丰富内置功能**
   - 支持：表格、流程图、甘特图、思维导图、Mermaid 图表
   - 支持：数学公式 KaTeX
   - 支持：图片拖拽上传、粘贴上传
   - 支持：目录导航、锚点跳转
   - 支持：暗黑/亮色双主题
4. **极致性能优化**
   - 长文档支持**虚拟滚动**，上万字无卡顿
   - 预览模式自动销毁编辑监听事件，内存占用极低
   - 懒加载非核心资源，首屏加载快
5. **多环境兼容**
   - Vite / Vue-CLI 项目正常使用
   - 支持 CDN 直接引入，**纯静态HTML、老项目网页直接嵌入**
   - 适配 PC 端 + 移动端自适应
6. **样式美观**
   - 现代简约排版，接近掘金、语雀文档风格
   - 自定义主题色、字体、边距灵活配置

### 适用场景
1. Vue3 后台管理系统文档编辑、文章发布
2. 博客、知识库、帮助中心 **纯文档预览页面**
3. 项目接口文档、技术笔记在线展示
4. 静态网页、老项目页面嵌入 Markdown 预览
5. 内部系统在线编写+查看技术文档
6. 教学平台代码文档展示

# 支持的 Markdown 语法

- 基础语法：标题、加粗、斜体、删除线、引用、分割线、有序/无序列表
- 进阶语法：行内代码、代码块、表格、任务列表
- 拓展语法：Mermaid 流程图、数学公式、脚注、注释
- 媒体：图片、链接、音视频链接渲染

# 安装方式

### npm 安装

```bash
# npm
npm install md-editor-v3
```

### pnpm 安装

```
# pnpm
pnpm add md-editor-v3
```

### CDN 引入

适合：无构建工具、静态页面、老项目专用

```html

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/md-editor-v3/lib/style.css">

<script src="https://cdn.jsdelivr.net/npm/md-editor-v3/dist/md-editor-v3.umd.js"></script>
```

# 全局注册（Vue3 项目）
```ts
// main.ts
import { createApp } from 'vue'
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(MdEditor)
app.mount('#app')
```

# 常用用法

### 1. 完整编辑模式（写文档、发布文章）
```vue
<template>
  <md-editor v-model="mdContent" />
</template>

### 2. 纯预览模式（只读展示，性能最优）
```vue
<template>
  <MdPreview :model-value="articleText" />
</template>

### 3. 编辑/预览一键切换
```vue
<template>
  <button @click="isPreview = !isPreview">
    {{ isPreview ? '进入编辑' : '进入预览' }}
  </button>
  <md-editor v-model="content" :preview-only="isPreview" />
</template>

# 常用核心属性配置

| 属性名 | 作用 | 类型 |
|--------|------|------|
| v-model | 双向绑定 markdown 文本 | string |
| preview-only | 开启只读预览模式 | boolean |
| toolbar | 是否显示顶部工具栏 | boolean |
| footers | 是否显示底部状态栏 | boolean |
| theme | 主题 `light` / `dark` | string |
| code-lines | 代码块是否显示行号 | boolean |
| virtual-scroll | 开启虚拟滚动（长文档必备） | boolean |
| placeholder | 编辑框默认提示文字 | string |
| max-length | 限制输入最大字符数 | number |
| auto-save | 是否开启自动保存 | boolean |

# 常用事件

- `onChange`：内容发生改变触发
- `onSave`：手动点击保存触发
- `onUploadImg`：图片上传回调，自定义上传接口

# 注意事项
1. **不支持 Vue2**，Vue2 项目无法使用
2. CDN 引入仅适合简单预览场景，复杂编辑建议工程化引入
3. 如需自定义上传图片、自定义渲染规则，可查阅官方文档配置钩子函数
4. 预览模式下所有编辑相关事件、输入监听全部失效，极致省电省性能

原文出处：http://www.malaoshi.top/show_1GW3KhG4U80R.html