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 承担,整体架构清晰且高效。
