开发所见即所得Markdown编辑器，致敬Typora大佬

MD Editor

MD Editor 是一款定位于“类 Typora”的 Markdown 编辑器，专注于提供干净、直接、跨平台的写作体验。无需在复杂的设置中反复切换，打开即可书写，所见即所得，特别适合技术写作、笔记整理与内容创作。

那么，它在实际使用中究竟带来了哪些体验上的提升？

✨ 功能特性

编辑体验是其核心亮点。MD Editor 支持双视图模式：一个是 WYSIWYG（所见即所得）的富文本编辑界面，另一个是传统的源码模式。两者可一键切换，无论是排版润色还是深究代码细节，都能灵活应对。尤其撰写技术文章时，这种切换几乎是刚需。

图片处理也得到了优化。你可以直接粘贴或拖拽图片到编辑区域，系统会自动将图片保存到本地，并支持自定义存储路径，无需再手动逐一搬运图片文件。文件管理方面，既支持打开单个文档，也支持打开整个文件夹，侧边栏的文件树结构让项目文件一目了然。

大纲导航是一项非常实用的功能。它能自动提取文档中的标题层级，生成清晰的结构树，点击即可跳转到对应位置。对于长文档来说，这一功能直接决定了写作效率。代码高亮覆盖了主流编程语言，数学公式依靠 KaTeX 渲染，同时支持 Mermaid 图表——流程图、时序图、甘特图等皆是标配。

表格编辑配备了专门的工具栏，无需再手动对齐 Markdown 表格的列宽。此外，MD Editor 提供浅色、深色、跟随系统三种主题切换，快捷键支持自定义，自动保存的间隔也可自行配置。查找替换功能甚至支持正则表达式，满足高级编辑需求。

?️ 技术栈

作为一款技术导向的产品，其底层选型同样值得关注。框架层面采用了 Electron 39 + Vue 3.5 + TypeScript，构建工具使用 electron-vite 5 + Vite 7。编辑器核心分为两部分：WYSIWYG 渲染使用 Milkdown 7，源码模式由 CodeMirror 6 负责。UI 样式基于 Tailwind CSS 4，搭配 @tailwindcss/typography 插件，视觉统一性表现出色。组件库引入了 reka-ui 和 Lucide Icons，状态管理由 Pinia 承担，整体架构清晰且高效。

App截图