开发所见即所得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 截图