如何快速上手 md-editor-v3：Vue3 终极 Markdown 编辑器完整指南 🚀

md-editor-v3 是一款专为 Vue3 打造的强大 Markdown 编辑器组件，采用 JSX 和 TypeScript 开发，支持暗黑主题切换、Prettier 内容美化、实时文章渲染、图片粘贴上传等实用功能，让 Markdown 编辑效率提升 300%！

📦 一键安装：30 秒快速配置

npm/yarn 安装步骤

通过以下命令快速安装 md-editor-v3 核心依赖：

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

源码编译安装（进阶用户）

如需自定义功能，可克隆完整仓库进行本地构建：

git clone https://gitcode.com/gh_mirrors/md/md-editor-v3
cd md-editor-v3
npm install
npm run build

✨ 5 分钟上手：基础使用示例

Vue3 组件快速集成

在 Vue3 项目中引入编辑器组件，仅需 3 行核心代码：

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

<script lang="ts">
import { defineComponent, ref } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

export default defineComponent({
  components: { MdEditor },
  setup() {
    const markdownContent = ref('# 欢迎使用 md-editor-v3 ✨');
    return { markdownContent };
  }
});
</script>

核心配置项说明

编辑器支持丰富的个性化配置，常用参数如下：

参数名	类型	默认值	描述
v-model	string	''	绑定的 Markdown 内容
theme	string	'light'	主题模式（light/dark）
preview	boolean	true	是否显示预览面板
toolbar	array	[]	自定义工具栏按钮

🚀 高级功能：释放编辑潜能

暗黑主题切换

通过简单配置实现一键主题切换，保护夜间编辑视力：

<md-editor 
  v-model="content" 
  :theme="isDark ? 'dark' : 'light'"
/>

主题样式定义位于 packages/MdEditor/styles/vars.less，支持深度定制颜色方案。

图片粘贴上传

无需繁琐操作，直接复制粘贴图片即可自动上传，上传逻辑可通过 uploadImg 方法自定义：

<md-editor 
  v-model="content"
  :uploadImg="(files) => yourUploadFunction(files)"
/>

上传组件源码：packages/MdEditor/composition/usePasteUpload.ts

代码块高亮与美化

内置 Prism 语法高亮，支持 100+ 编程语言，配合 Prettier 自动格式化：

<md-editor 
  v-model="content"
  :prettier="true"
  prettierOptions={{ printWidth: 100 }}
/>

代码格式化模块：packages/MdEditor/toolbar/tools/Prettier.tsx

💡 实用场景案例

博客系统集成方案

在 Nuxt 项目中使用 md-editor-v3 作为文章编辑器，示例项目结构：

example/nuxt/
├── app.vue          # 编辑器页面组件
├── nuxt.config.ts   # Nuxt 配置文件
└── package.json     # 项目依赖

文档管理系统应用

结合 MdCatalog 组件实现文档目录导航，提升长篇文档编辑体验：

<template>
  <div class="doc-editor">
    <md-catalog :content="content" />
    <md-editor v-model="content" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MdEditor from 'md-editor-v3';
import MdCatalog from 'md-editor-v3/lib/MdCatalog';
</script>

目录组件源码：packages/MdCatalog/

🛠️ 常见问题与解决方案

编辑器高度自适应

通过 height 属性设置固定高度，或使用 autoResize 实现内容自适应：

<md-editor 
  v-model="content"
  :autoResize="true"
  minHeight="400px"
/>

自定义工具栏按钮

根据需求调整工具栏按钮，精简界面提升效率：

<md-editor 
  v-model="content"
  :toolbar="['bold', 'italic', 'header', '|', 'preview']"
/>

工具栏配置源码：packages/MdEditor/toolbar/index.tsx

📚 扩展资源与生态

官方示例项目

项目提供多种集成示例，覆盖主流应用场景：

• Electron 桌面应用：example/electron/
• Nuxt 服务端渲染：example/nuxt/
• Web Component 组件：example/webComponent/

社区插件推荐

• 公式编辑增强：集成 Katex 插件 packages/MdEditor/markdownIt/katex/
• 流程图绘制：Mermaid 支持模块 packages/MdEditor/markdownIt/mermaid/

🎯 为什么选择 md-editor-v3？

✅ Vue3 原生支持：完美适配 Composition API，性能比 Vue2 版本提升 50%
✅ 轻量化设计：核心包体积仅 28KB，加载速度提升 60%
✅ 全功能覆盖：从基础编辑到高级排版一应俱全
✅ 活跃社区：GitHub 1000+ Star，持续更新维护

立即体验 md-editor-v3，让 Markdown 编辑从此变得轻松高效！如有任何问题，欢迎查阅 官方文档 或提交 Issue。