Awesome Open Source
Awesome Open Source

Arya - 在线 Markdown 编辑器

📝 基于 VueVditor,所构建的在线 Markdown 编辑器,支持绘制流程图、甘特图、时序图、任务列表、echarts 图表、五线谱,以及 PPT 预览、视频音频解析、HTML 自动转换为 Markdown 等功能。markdown.lovejade.cn

背景初衷

早期就有关注到由黑客派所出品的 Vditor:一款为未来而构建的下一代 Markdown 编辑器。然,现而今市面上所存在的 Markdown 编辑器,或多或少都存在一些问题(或功能不全,或高级功能收费...),因此基于自身所需,加之 Vditor 的强大,就诞生了做一款在线 Markdown 编辑器 的念头;取其名曰 Arya(二丫)

功能支持

  • [x] 🎉 通常 Markdown 解析器自带的基本功能;
  • [x] 🍀 支持流程图甘特图时序图任务列表
  • [x] 🏁 支持粘贴 HTML 自动转换为 Markdown;
  • [x] 💃🏻 支持插入原生 Emoji、设置常用表情列表;
  • [x] 🚑 支持编辑内容保存本地存储,防止意外丢失;
  • [x] 📝 支持实时预览,主窗口大小拖拽,字符计数;
  • [x] 🛠 支持常用快捷键(Tab),及代码块添加复制;
  • [x] ✨ 支持导出携带样式的 PDF、PNG、JPEG 等;
  • [x] ✨ 升级 Vditor,新增对 echarts 图表的支持;
  • [x] ✨ 注入 RevealJs,增设对 PPT 预览支持;
  • [x] 👏 支持检查并格式化 Markdown 语法,使其专业;
  • [x] 🦑 支持五线谱、及部分站点、视频、音频解析
  • [x] 🌟 增加对所见即所得编辑模式的支持(⌘-⇧-M);
  • [x] 🌟 新增复制到微信公众号等周边功能;

如何使用

清空目前 Arya 编辑区默认文档,即可使用。

默认为所见即所得模式,可通过 ⌘-⇧-MCtrl-⇧-M)进行切换;或通过以下方式:

  • 所见即所得:⌘-⌥-7Ctrl-alt-7);
  • 即时渲染:⌘-⌥-8Ctrl-alt-8);
  • 分屏渲染:⌘-⌥-9Ctrl-alt-9);

PPT 预览

如果您用作 PPT 预览(入口在设置中),需要注意,这里暂还不能支持各种图表的渲染;您可以使用 --- 来定义水平方向上幻灯片,用 -- 来定义垂直幻灯片;更多设定可以参见 RevealJs 文档

如何开发

# 🎉 克隆项目
git clone https://github.com/nicejade/markdown-online-editor.git
cd markdown-online-editor

# ➕ 安装依赖(跳过安装 )
env PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn

# 🚧 开始开发
yarn start

# 🚀 部署 Github Pages(需修改 commands/deploy.sh)
yarn deploy

关于本应用构建:因采用 prerender-spa-plugin 以解决 SPA SEO 问题,故而,您需要在根目录下创建 arya.config.js,根据 arya.config.sample.js 中示例格式,来设定 executablePath 参数,从而指定插件中捆绑的 Chromium 所在目录,使得 prerender-spa-plugin 可以正常工作。更多详情,可以参见 Puppeteer 安装注意事项

特别鸣谢

Arya 的产生,得益于 vditor:一款浏览器端的 Md 编辑器,同时也离不开 vue、reveal.js 等开源库的支持,感谢 🙌。

相关链接

微信公众号 前端微信群 推荐 Web 应用 推荐小程序
😉 静晴轩 ✨ 大前端联盟 🎉 倾城之链 🌊 倾城之链
静晴轩 倾城之链 倾城之链 倾城之链

License

MIT

Copyright (c) 2018-present, nicejade.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
css (7,163
vue (3,957
markdown (812
editor (448
flowchart (41

Find Open Source By Browsing 7,000 Topics Across 59 Categories