Vue3使用md-editor-v3的实例解读markdown文本

在 Vue 3 项目中集成 Markdown 编辑器，md-editor-v3 是一个相当成熟且功能完备的选择。下面直接进入正题，从基础实现到预览功能，覆盖常用配置和最佳实践。

1. 基础实现

安装依赖

npm install md-editor-v3

或者用 pnpm：

pnpm install md-editor-v3

基础编辑器组件 (BasicEditor.vue)

最简单的用法就是直接绑定 v-model：

自定义工具栏

md-editor-v3 的工具栏参数非常丰富，文档里列出了所有可用的选项，直接拿来用就行：

const toolbars = [
  'bold',          // 加粗
  'underline',     // 下划线
  'italic',        // 斜体
  'strikeThrough', // 删除线
  'title',         // 标题
  'sub',           // 下标
  'sup',           // 上标
  'quote',         // 引用
  'unorderedList', // 无序列表
  'orderedList',   // 有序列表
  'task',          // 任务列表
  'codeRow',       // 行内代码
  'code',          // 代码块
  'link',          // 链接
  'image',         // 图片
  'table',         // 表格
  'mermaid',       // Mermaid图表
  'katex',         // 数学公式
  'revoke',        // 撤销
  'next',          // 重做
  'sa ve',          // 保存
  '=',             // 等宽
  'pageFullscreen',// 页面全屏
  'fullscreen',    // 全屏
  'preview',       // 预览
  'htmlPreview',   // HTML预览
  'catalog',       // 目录
  '-'              // 分隔符
]

你可以根据需要自由组合，比如只保留编辑相关的核心按钮，或者加入分隔符来分组。下面是一个完整的示例：

2. 预览功能

预览组件 (MdPreview / MdCatalog)

预览分为两部分：文章内容预览和目录预览。分别对应 MdPreview 和 MdCatalog 组件：

值得注意的是，MdPreview 是纯展示组件，不需要编辑工具栏；MdCatalog 会根据文档标题自动生成带锚点跳转的目录，非常适合长文章或帮助文档的场景。

除此之外，md-editor-v3 还支持代码高亮、主题切换、国际化等高级特性，都可以按需开启。

总结

从基础编辑器到自定义工具栏，再到独立的预览与目录组件，这套方案已经能够覆盖绝大多数 Markdown 编辑场景。你可以直接复制上述代码集成到 Vue 3 项目中，然后根据实际需求进一步调整样式或功能扩展。