Modern MD Editor 是一款面向创作者与内容团队的「高颜值 Markdown 编辑器 + 社交平台发布器」。它以极致的界面与交互为基础，提供所见即所得的实时预览与多端视口切换，并通过一键复制将 Markdown 转为适配微信公众号/社交平台的高保真富文本（自动内联样式、字体/行高/字距与主题化适配），让创作到发布的最后一步变得优雅、高效、可控。

项目特性

所见即所得预览与编辑（WYSIWYG）：
新增「可编辑模式」：点击顶部「视图切换」中的「所见即所得（可编辑）」按钮进入富文本所见即所得编辑；再次点击可切回「编辑器」或「编辑 + 预览」。
基于 Milkdown（preset-commonmark + preset-gfm）与 Prism 高亮，并与 Markdown 文本双向同步。
支持 Mermaid 节点视图；表格内反引号在少数场景做了兼容处理，确保展示与复制兼容。
保持与主题/代码样式/排版系统一致。
预览视口一键切换：桌面 / 平板 / 手机。
LaTeX 数学公式支持：
行内公式：使用单美元符 $E=mc^2$ 包裹。
块级公式：使用双美元符 $$..$$ 包裹，支持跨行。
基于 MathJax 3 渲染为 SVG，确保微信公众号完美兼容。
复制到公众号时自动处理公式样式，无需额外调整。
一键复制为公众号/社交平台格式：
自动注入内联样式（字体、字号、行高、字距、配色）。
主题化适配与细节增强（标题、列表、引用、代码、表格等）。
现代 Clipboard API 优先，失败时自动降级，增强兼容性。
强大的主题与排版系统：
颜色主题（含自定义主题色实时预览与持久化）。
代码样式（背景/字体/高亮变量一站式应用）。
排版主题系统（布局、间距、圆角、阴影等 CSS 变量）。
可调字体与阅读体验：
字体族、字号、行高、字距皆可在设置面板中直观调节。
现代前端架构：
基于 Vue 3 + Vite 5 + CodeMirror 6。
主题预加载（避免 FOUC）、性能防抖与缓存、模块化可扩展设计。
技术栈与架构
核心框架
Vue 3：组件化与响应式核心，使用 <script setup> 与组合式 API 实现清晰的 UI 与状态管理。
Vite 5：极速开发服务器与构建工具，HMR 体验优秀，使用官方插件 @vitejs/plugin-vue 处理 .vue。
编辑器
CodeMirror 6：提供高性能文本编辑、快捷键与滚动事件。在 src/composables/editor/ 封装编辑器的生命周期、操作与状态。
所见即所得（Milkdown）：基于 @milkdown/core、preset-commonmark、preset-gfm、plugin-prism、plugin-history、plugin-clipboard 与自定义 Mermaid NodeView；组件：src/components/WysiwygPane.vue。
Markdown 渲染管线
src/core/markdown/parser.js：单文件解析入口，顺序处理代码块/列表/表格/引用/标题/段落；PreviewPane.vue 调用 parseMarkdown 生成预览版与社交版 HTML。
src/core/markdown/inline-formatter.js：行内语法处理（加粗/斜体/链接/图片/转义等）。
src/core/markdown/code-formatter.js：代码块高亮与渲染（含 Mermaid 特判与社交复制样式）。
src/core/markdown/social-adapters.js：社交平台适配与内联样式注入，提供可注册的主题适配器。
复制链路
src/core/editor/copy-formats.js：一键生成社交版/Markdown 两种复制格式。
src/core/editor/clipboard.js：Clipboard API 优先，失败降级到 execCommand；模拟社交平台容器，处理字体/行高/字距等细节。
主题系统
src/core/theme/manager.js：集中管理并写入 CSS 变量；src/core/theme/loader.js 首屏预注入，避免 FOUC；src/styles/themes/* 为样式基线，预设数据在 src/config/theme-presets.js。
样式基线
github-markdown-css：为 Markdown 预览提供一致的基础排版，结合自定义 CSS 变量与主题系统统一风格。
测试体系
Vitest + @vue/test-utils + jsdom：脚本：test、test:ui、test:coverage。
目录分层
components/（UI） · composables/（复用逻辑） · core/（编辑器/解析/主题/复制） · config/（常量与工具栏） · shared/（公共工具函数） · styles/（全局与组件样式）。
环境要求
Node.js：≥ 18（推荐 18/20 LTS）
桌面应用支持
这个项目现在支持 Electron 桌面应用！你可以：

🚀 快速启动: npm run electron:dev - 同时启动开发服务器和桌面应用
📱 原生体验: 享受完整的桌面应用体验，包括菜单栏、快捷键等
💾 本地文件: 支持本地文件的打开、编辑、保存等操作
🔧 跨平台: 支持 macOS、Windows 和 Linux
桌面应用功能
文件操作: 打开文件（支持 .md、.markdown、.txt 等格式）、保存文件
快捷键: Cmd/Ctrl+O（打开）、Cmd/Ctrl+S（保存）
菜单栏: 完整的应用菜单（文件、编辑、视图、帮助）
窗口管理: 支持调整大小、全屏等
日志记录: 详细的操作日志，便于调试和了解应用状态

GitHub地址：https://github.com/xiaobox/mdeditor

声明：本站内容均收集于互联网，如不慎侵犯到您的版权利益，请附带相关证明文件来信本站将立即予以下架删除。