Vue3 首选 Markdown 编辑器:md-editor-v3 详解 作者:马育民 • 2026-05-18 12:04 • 阅读:10010 # 介绍 **官网**: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 ``` # 全局注册(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 ``` ### 2. 纯预览模式(只读展示,性能最优) ```vue ``` ### 3. 编辑/预览一键切换 ```vue {{ isPreview ? '进入编辑' : '进入预览' }} ``` # 常用核心属性配置 | 属性名 | 作用 | 类型 | |--------|------|------| | 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