Arya：功能强大的在线 Markdown 编辑器，所见即所得，一键复制到公众号
2026/7/20大约 5 分钟
如何高效地编写和管理 Markdown 文档？
如何一键将 Markdown 内容复制到微信公众号？
Arya：功能强大的在线 Markdown 编辑器
所见即所得，支持流程图、甘特图、PPT 预览
来源：GitHub，ajeepDocker/arya（fork 自 nicejade/markdown-online-editor）
问题背景
Markdown 编辑器的痛点：
┌─────────────────────────────────────────────────────────┐
│ Markdown 编辑器的痛点 │
├─────────────────────────────────────────────────────────┤
│ │
│ 典型场景： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 功能不全的编辑器 │ │
│ │ · 不支持流程图、甘特图、时序图 │ │
│ │ · 不支持 PPT 预览 │ │
│ │ · 不支持视频音频解析 │ │
│ │ · 高级功能收费 │ │
│ │ │ │
│ │ 2. 公众号发布繁琐 │ │
│ │ · 需要手动转换格式 │ │
│ │ · 样式容易错乱 │ │
│ │ · 图片需要单独上传 │ │
│ │ · 需要多次调整 │ │
│ │ │ │
│ │ 3. 内容容易丢失 │ │
│ │ · 意外关闭浏览器导致内容丢失 │ │
│ │ · 没有自动保存 │ │
│ │ · 没有本地存储 │ │
│ │ │ │
│ │ 4. 编辑体验不佳 │ │
│ │ · 没有实时预览 │ │
│ │ · 没有快捷键支持 │ │
│ │ · 没有代码块复制 │ │
│ │ · 没有字符计数 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 传统解决方案的局限： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 本地 Markdown 编辑器 │ │
│ │ · 需要安装软件 │ │
│ │ · 跨平台同步困难 │ │
│ │ · 不支持云端协作 │ │
│ │ · 功能扩展受限 │ │
│ │ │ │
│ │ 2. 在线编辑平台 │ │
│ │ · 高级功能收费 │ │
│ │ · 广告多 │ │
│ │ · 数据隐私担忧 │ │
│ │ · 功能受限 │ │
│ │ │ │
│ │ 3. 公众号编辑器 │ │
│ │ · 不支持 Markdown │ │
│ │ · 格式调整困难 │ │
│ │ · 代码块显示问题 │ │
│ │ · 不支持图表 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘解决方案：Arya
功能强大的在线 Markdown 编辑器
┌─────────────────────────────────────────────────────────┐
│ Arya 解决方案 │
├─────────────────────────────────────────────────────────┤
│ │
│ 核心定位： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 📝 基于 Vue、Vditor 构建的在线 Markdown 编辑器 │ │
│ │ 🎨 支持所见即所得编辑模式 │ │
│ │ 🚀 一键复制到微信公众号 │ │
│ │ 💾 本地存储，防止意外丢失 │ │
│ │ 📊 支持流程图、甘特图、时序图、PPT 预览 │ │
│ │ 🎬 支持视频音频解析 │ │
│ │ 🎵 支持五线谱 │ │
│ │ 🔧 支持导出 PDF、PNG、JPEG │ │
│ │ ✨ 支持检查并格式化 Markdown 语法 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 技术栈： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · Vue.js（前端框架） │ │
│ │ · Vditor（Markdown 编辑器核心） │ │
│ │ · RevealJs（PPT 预览） │ │
│ │ · Echarts（图表支持） │ │
│ │ · Puppeteer（SEO 预渲染） │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 在线体验： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ https://markdown.lovejade.cn/ │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ License： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ MIT License（开源免费） │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘核心功能
15+ 强大功能，满足所有 Markdown 编辑需求
┌─────────────────────────────────────────────────────────┐
│ 核心功能 │
├─────────────────────────────────────────────────────────┤
│ │
│ 1. 基础 Markdown 功能 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 通常 Markdown 解析器自带的基本功能 │ │
│ │ · 支持标题、列表、引用、代码块、表格等 │ │
│ │ · 支持行内代码、粗体、斜体、删除线等 │ │
│ │ · 支持链接、图片、锚点等 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 2. 图表支持 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 流程图（Flowchart） │ │
│ │ · 甘特图（Gantt） │ │
│ │ · 时序图（Sequence diagram） │ │
│ │ · 任务列表（Task list） │ │
│ │ · Echarts 图表 │ │
│ │ │ │
│ │ 示例： │ │
│ │ ```mermaid │ │
│ │ graph TD │ │
│ │ A[开始] --> B[判断] │ │
│ │ B -->|是| C[执行] │ │
│ │ B -->|否| D[结束] │ │
│ │ ``` │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 3. 所见即所得编辑模式 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 支持所见即所得（WYSIWYG）编辑 │ │
│ │ · 快捷键：⌘-⇧-M（Ctrl-⇧-M）切换模式 │ │
│ │ · 支持三种编辑模式： │ │
│ │ - 所见即所得：⌘-⌥-7（Ctrl-alt-7） │ │
│ │ - 即时渲染：⌘-⌥-8（Ctrl-alt-8） │ │
│ │ - 分屏渲染：⌘-⌥-9（Ctrl-alt-9） │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 4. HTML 自动转换为 Markdown │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 支持粘贴 HTML 自动转换为 Markdown │ │
│ │ · 从网页复制内容，粘贴即可自动转换 │ │
│ │ · 保留格式、链接、图片等 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 5. Emoji 支持 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 支持插入原生 Emoji │ │
│ │ · 设置常用表情列表 │ │
│ │ · 快速插入 Emoji │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 6. 本地存储 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 支持编辑内容保存本地存储 │ │
│ │ · 防止意外丢失 │ │
│ │ · 自动保存 │ │
│ │ · 刷新后自动恢复 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 7. 实时预览 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 支持实时预览 │ │
│ │ · 主窗口大小拖拽 │ │
│ │ · 字符计数 │ │
│ │ · 快速预览效果 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 8. 快捷键支持 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 支持常用快捷键（Tab） │ │
│ │ · 代码块添加复制按钮 │ │
│ │ · 快速插入常用语法 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 9. 导出功能 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 支持导出携带样式的 PDF │ │
│ │ · 支持导出 PNG │ │
│ │ · 支持导出 JPEG │ │
│ │ · 保留原有样式 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 10. PPT 预览 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 注入 RevealJs，增设对 PPT 预览支持 │ │
│ │ · 使用 --- 定义水平方向幻灯片 │ │
│ │ · 使用 -- 定义垂直方向幻灯片 │ │
│ │ · 支持多种 PPT 主题 │ │
│ │ · 支持幻灯片切换动画 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 11. Markdown 语法检查 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 支持检查并格式化 Markdown 语法 │ │
│ │ · 使 Markdown 更加专业 │ │
│ │ · 自动修复常见语法错误 │ │
│ │ · 提供语法建议 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 12. 五线谱支持 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 支持五线谱渲染 │ │
│ │ · 支持音乐符号 │ │
│ │ · 适合音乐教学 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 13. 视频音频解析 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 支持部分站点视频解析 │ │
│ │ · 支持音频解析 │ │
│ │ · 自动识别链接 │ │
│ │ · 自动渲染播放器 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 14. 复制到微信公众号 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ · 新增复制到微信公众号等周边功能 │ │
│ │ · 一键复制格式化内容 │ │
│ │ · 保留原有样式 │ │
│ │ · 自动适配公众号样式 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘快速开始
三步开始使用 Arya
┌─────────────────────────────────────────────────────────┐
│ 快速开始：三步开始使用 Arya │
├─────────────────────────────────────────────────────────┤
│ │
│ 第 1 步 — 访问在线编辑器： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ https://markdown.lovejade.cn/ │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 第 2 步 — 清空默认文档： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 清空 Arya 编辑区默认文档，即可使用 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 第 3 步 — 开始编辑： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 默认为所见即所得模式，可通过快捷键切换： │ │
│ │ · 所见即所得：⌘-⌥-7（Ctrl-alt-7） │ │
│ │ · 即时渲染：⌘-⌥-8（Ctrl-alt-8） │ │
│ │ · 分屏渲染：⌘-⌥-9（Ctrl-alt-9） │ │
│ │ · 切换模式：⌘-⇧-M（Ctrl-⇧-M） │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 本地开发： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ # 克隆项目 │ │
│ │ git clone https://github.com/nicejade/ │ │
│ │ markdown-online-editor.git │ │
│ │ cd markdown-online-editor │ │
│ │ │ │
│ │ # 安装依赖(跳过安装) │ │
│ │ env PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn │ │
│ │ │ │
│ │ # 开始开发 │ │
│ │ yarn start │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘核心思想
功能强大的在线 Markdown 编辑器，所见即所得
┌─────────────────────────────────────────────────────────┐
│ 核心思想 │
├─────────────────────────────────────────────────────────┤
│ │
│ Arya 的革命性意义： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 1. 功能全面 │ │
│ │ · 支持流程图、甘特图、时序图、PPT 预览 │ │
│ │ · 支持视频音频解析、五线谱 │ │
│ │ · 支持导出 PDF、PNG、JPEG │ │
│ │ │ │
│ │ 2. 所见即所得 │ │
│ │ · 支持所见即所得编辑模式 │ │
│ │ · 实时预览 │ │
│ │ · 快捷键支持 │ │
│ │ │ │
│ │ 3. 一键复制到公众号 │ │
│ │ · 新增复制到微信公众号等周边功能 │ │
│ │ · 一键复制格式化内容 │ │
│ │ · 保留原有样式 │ │
│ │ │ │
│ │ 4. 本地存储 │ │
│ │ · 编辑内容保存本地存储 │ │
│ │ · 防止意外丢失 │ │
│ │ · 自动保存 │ │
│ │ │ │
│ │ 5. 开源免费 │ │
│ │ · MIT License │ │
│ │ · 完全开源 │ │
│ │ · 无需付费 │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 这就是 Arya 的核心价值： │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 功能强大的在线 Markdown 编辑器！ │ │
│ │ │ │
│ │ 所见即所得，一键复制到公众号，15+ 强大功能！ │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘收尾金句
- 如何高效地编写和管理 Markdown 文档？
- 如何一键将 Markdown 内容复制到微信公众号？
- Arya：功能强大的在线 Markdown 编辑器
- 所见即所得，支持流程图、甘特图、PPT 预览
Arya：功能强大的在线 Markdown 编辑器，所见即所得，一键复制到公众号！
15+ 强大功能，开源免费，在线体验：https://markdown.lovejade.cn/
"