🎄 md-editor-v3

English | 中文

vue3 环境的 Markdown 编辑器，使用 jsx 和 typescript 语法开发。

• 文档与在线预览：传送门

• 同系列react版本：md-editor-rt

⭐️ 功能一览

• 快捷插入内容工具栏、编辑器浏览器全屏、页面内全屏等；
• 内置的白色主题和暗黑主题，支持绑定切换；
• 支持快捷键插入内容； 支持使用 prettier 格式化内容（使用 CDN 方式引入，只支持格式化 md 内容，可在代码内设置关闭）；
• 多语言，支持自行扩展语言；
• 粘贴上传图片，图片裁剪上传；
• 仅预览模式（不显示编辑器，只显示 md 预览内容，无额外监听）；
• 预览主题，内置default、vuepress、github 、cyanosis、mk-cute、smart-blue 6 种预览主题（不完全相同），支持自定义主题（参考文档 demo 页示例）；
• mermaid绘图（>=1.8.0），katex数学公式（>=1.9.0）；
• 自定义工具栏顺序或显示，自定义扩展工具栏（支持点击类型、下拉菜单类型及弹窗类型）等。
• 按需引用(>=4.0.0)。

🗺 预览图

默认模式	暗黑模式	仅预览

输入提示和自定义简单的标记、表情扩展预览

📦 安装

npm i md-editor-v3

使用已存在的语言、主题扩展，例如：日语

npm i @vavt/cm-extension

使用更多的扩展工具栏组件，例如：导出内容为 PDF

npm i @vavt/v3-extension

更多使用及贡献方式参考：md-editor-extension

💡 用法

从v4.0.0开始，内部组件支持按需引用。

✍🏻 编辑器模式

<template>
  <MdEditor v-model="text" />
</template>

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

const text = ref('# Hello Editor');
</script>

📖 仅预览模式

<template>
  <MdPreview :id="id" :modelValue="text" />
  <MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template>

<script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';

const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>

当使用服务端渲染时，scrollElement应该是字符类型，例：html、body、#id、.class。

---

更多用法请前往 文档。

🏁 参与贡献

🤝 提交规范（对齐发布流水线）

.github/workflows/latest.yml 会基于提交信息生成 CHANGELOG.md，协同维护时统一使用以下规范。

• 格式：<type>(<scope>)!: <summary>
• 推荐类型：
  • feat：进入 Features
  • refactor：进入 Refactors
  • fix：进入 Fixed Bugs
  • 其他类型：进入 Others
• 标题应描述“用户可感知的改动/修复问题”，不要只写机械动作（例如只写 bump xxx）。
• 建议补充正文（对应 git cz 的 long description），说明动机与影响，特别是依赖升级类提交。
• 不要使用纯版本号作为标题（如 6.3.2、v6.3.2-beta.1），发布脚本会忽略。
• docs(changelog): ... 预留给流水线自动生成的 changelog 提交。
• 如果在提交标题或正文写了 #123，发布后流水线会给该 issue 留言并自动关闭；只关联真正已在该版本解决的问题。

示例：

git commit -m "feat(editor): support drag-sort toolbar items"
git commit -m "fix(preview): sync anchor when heading id contains emoji #1234"
git commit -m "fix(deps): bump @vavt/markdown-theme to fix mermaid overflow"
git commit -m "refactor(build): simplify dts rollup pipeline"