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 稿件稳定输出为微信公众号与多社交平台格式的内容团队
  • 关注品牌一致性与阅读体验的创作者
  • 希望在创作期就锁定排版与多端呈现的个人或团队


Modern MD Editor获取方式

官网:

https://mmdeditor.boxtech.icu/

GitHub:

https://github.com/xiaobox/mdeditor