介绍

官网：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 安装

# npm
npm install md-editor-v3

pnpm 安装

# pnpm
pnpm add md-editor-v3

CDN 引入

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

<!-- Vue3 CDN -->
<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">
<!-- 组件JS -->
<script src="https://cdn.jsdelivr.net/npm/md-editor-v3/dist/md-editor-v3.umd.js"></script>

全局注册（Vue3 项目）

// 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. 完整编辑模式（写文档、发布文章）

<template>
  <md-editor v-model="mdContent" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const mdContent = ref('## 开始编辑Markdown')
</script>

2. 纯预览模式（只读展示，性能最优）

<template>
  <MdPreview :model-value="articleText" />
</template>

<script setup lang="ts">
import { MdPreview, MdCatalog } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { ref } from 'vue'
// 后端接口获取markdown文本
const articleText = ref('')
</script>

3. 编辑/预览一键切换

<template>
  <button @click="isPreview = !isPreview">
    {{ isPreview ? '进入编辑' : '进入预览' }}
  </button>
  <md-editor v-model="content" :preview-only="isPreview" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const content = ref('')
const isPreview = ref(false)
</script>

常用核心属性配置

常用事件

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

注意事项

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

原文出处：/show_1GW3KhG4U80R.html