Modern MD Editor概览
Modern MD Editor 是一款面向创作者与内容团队的现代化 Markdown 工具,集「所见即所得编辑 + 实时预览 + 一键复制为公众号/社交平台高保真富文本」于一体。界面精致,交互顺滑,支持桌面/平板/手机视口切换,并在复制时自动内联样式,实现字体、行高、字距与主题的统一,降低排版走样风险。
Modern MD Editor核心特点
- 一键复制为微信公众号/社交平台可用的 HTML,高保真还原排版
- 所见即所得与 Markdown 文本双向同步,预览与编辑统一体验
- 主题、代码样式与排版系统可视化可调,快速获得品牌一致性
- 预览视口一键切换,创作阶段即可感知多端效果
- 现代 Clipboard API 优先,失败时自动降级,提升兼容性
- 主题预加载避免闪烁(FOUC),结合防抖与缓存优化性能
Modern MD Editor主要功能
所见即所得与多视图
- 提供「可编辑模式」富文本所见即所得;可在「编辑器」「编辑 + 预览」与「所见即所得」之间切换
- 预览窗口支持桌面、平板、手机视口,一步核对多端呈现
一键复制为公众号/社交平台格式
- 自动注入内联样式:字体、字号、行高、字距、配色
- 标题、列表、引用、代码、表格等细节做了主题化增强与适配
Markdown/语法与高亮
- 基于 Milkdown(preset-commonmark + preset-gfm)
- Prism 代码高亮,样式与主题系统保持一致
- 支持 Mermaid 节点视图;表格内反引号在少数场景下做兼容处理
- 与 Markdown 文本双向同步,减少格式不一致
主题与排版系统
- 颜色主题含自定义主题色,实时预览并持久化
- 代码样式可统一设置背景、字体与高亮变量
- 排版主题以 CSS 变量管理布局、间距、圆角、阴影
- 字体族、字号、行高、字距可在设置面板直观调节
兼容性与性能
- 现代 Clipboard API 优先,失败自动降级
- 主题预加载避免样式闪烁
- 性能防抖、缓存与模块化可扩展设计
桌面应用(Electron)
-
快速启动:
npm run electron:dev
同时启动开发服务器与桌面应用 - 跨平台:macOS / Windows / Linux
-
本地文件:打开与保存本地
.md
、
.markdown
、
.txt
等格式 - 快捷键:Cmd/Ctrl+O(打开)、Cmd/Ctrl+S(保存)
- 应用菜单:文件、编辑、视图、帮助;支持窗口大小调整与全屏
- 记录详细操作日志,便于调试与排错
技术栈
- 前端:Vue 3 + Vite 5 + CodeMirror 6
- Markdown/高亮:Milkdown + Prism
- 桌面端:Electron
适用场景
- 需要将 Markdown 稿件稳定输出为微信公众号与多社交平台格式的内容团队
- 关注品牌一致性与阅读体验的创作者
- 希望在创作期就锁定排版与多端呈现的个人或团队