安利一款功能丰富的「在线 Markdown 编辑器」

[jeffjade]

Arya 在线 Markdown 编辑器

Arya，是一款基于 Vue、Vditor，所构建的在线 Markdown 编辑器，轻量且强大：内置粘贴 HTML 自动转换为 Markdown，支持 PPT 预览，以及绘制流程图、甘特图、时序图、任务列表、五线谱，可导出携带样式的图片、PDF 等；另外支持实时预览、本地存储、字符计数，提供常用快捷键(Tab)，及代码块添加复制等功能。

备注：Arya 另一大优点在于：编辑内容只会在您本地进行保存，不会上传您的数据至服务器，绝不窥测用户个人隐私，可放心使用； Github 源码：markdown-online-editor，部分功能仍在开发🚧，敬请期待。

背景初衷📝

早期就有关注到由黑客派所出品的 Vditor：一款为未来而构建的下一代 Markdown 编辑器。然，现而今市面上所存在的 Markdown 编辑器，或多或少都存在一些问题（或功能不全，或高级功能收费...），因此基于自身所需，加之 Vditor 的强大，就诞生了做一款在线 Markdown 编辑器的念头；取其名曰：Arya，个中原由，有在[观《权利的游戏》感记]( https://quickapp.lovejade.cn/talking-game-of-thrones/#Arya%20Stark （艾莉亚·史塔克）)一文有做记载。

功能支持🎉

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

关于定位📌

众所周知，早在几年前，市面上就充盈百余种不同的 Markdown 编辑器；其中不乏很多功能强大，体验良好的 Markdown 神器；在 倾城之链 | Markdown 标签中，也是收录了些 Markdown 相关工具。但，就如在初衷中提及的，那些工具或多或少都存在一些问题比如：功能不全，使用不便，体验不佳，或高级功能收费等；对于 Arya，无意让她在 Markdown 的江湖逐鹿中原，目前给其设定就是：轻盈且强大，免费又安全。关于 Arya 能做的，可参见 Arya Markdown 功能支持；当然，那并不是 Arya 最终形态，如果您有更多关于 Markdown 相关的诉求或建议，欢迎👏提给我（可以通过各种渠道），这边会尽最大努力满足您。

欲了解更多，可参见文章：为高效而生：Arya Jarvis。

会在幽居空谷轩 | 作品路径下，云集自己最新的开源作品，欢迎各路朋友体验，同时提出您宝贵的建议或意见；与此同时，也会维护些其他开源作品，具体可以参见如下列表：

• 🐬倾城之链 | NICE LINKS: 旨在云集全球优秀网站，方便你我探索互联网中更广阔的世界；
• 🌍与时俱进版前端资源教程: 旨在为前端学习，技能提升，视野扩展，资料查找等行个方便；
• 📝Arya - 在线 Markdown 编辑器: 是一款基于 Vue、Vditor，为未来而构建的在线 Markdown 编辑器，轻量且强大；
• 🛠Arya Jarvis：为高效而生 ：旨在为开发人员节省更多时间和精力；
• 🛠快应用开发资源、教程精选: 云集最新快应用相关教程文章、开发资源、项目案例及新闻动态；为快应用开发者提供便利和参考；
• 🔨快应用开发脚手架模板：致力于构建更为优雅的「快应用」开发脚手架模板；
• 🦅Vue-Cli3 脚手架模版：基于 Vue-Cli3 搭建的开箱即用 Vue 脚手架模版， 致力于探究更高效地构建优质 Web 应用；
• 🐉Docker Vue Node Nginx Mongodb Redis: 集成 Docker、Vue、Node 等，用于更高效，更优雅地开发和构建Web应用程序。

Arya，在线 Markdown 编辑器，最近同步了 vditor 最近更新，支持了「所见即所得」的编辑模式；感兴趣的朋友可是尝试下。

在线地址： https://markdown.lovejade.cn/

几个小亮点说明（个人也比较常用的功能）：

1. 内置粘贴 HTML 自动转换为 Markdown
2. 方便画各种图（流程图、甘特图、时序图，echarts）
3. 支持「所见即所得」的编辑模式
4. 支持检查并格式化 Markdown 语法
5. 数据本地进行保存（localStorage），嗯，设计如此。

[jeffjade]

补充：有在 https://github.com/nicejade/markdown-online-editor/issues/6 记录 Arya Markdown 功能性更新日志。

[qiguai2017]

一直免费的话，感觉没有盈利模式，光靠爱发电的产品，基本都会变成恨，最后直接不更新了。

[HarryQu]

它只是一个开源项目，并不是是一个商业产品。

[jeffjade]

@qiguai2017 嗯嗯，同意。自己经常会用到 Markdown，所以写一下也是为了自己方便。
因为其中绝大多数工作是 Vditor （独立开发者）这款开源作品做的，所以开发成本不是很高（他们是有自己的盈利模式）。
Arya Markdown，对于我这块获利，也是有些作用的，比如：导流（其他的一些作品，会载入广告什么的来薅羊毛）。

[jeffjade]

@HarryQu 对的，目前还没有写商业产品的打算；如今，能在业余时间能做一款对大家有用的开源项目，也是挺不容易的。

[pypy]

感谢楼主，粗略使用了一下，体验不错。已加入书签准备继续使用。支持继续更新。

[37Y37]

感谢，实名支持

[pypy]

建议：
1. 左侧增加文件树管理，可同时编辑多个文档；
2. 拖拽式上传图片并生成图片链接；
3. 探索收费模式，例如建议 1 可以实现的话，可付费扩大文件数量等；

[jeffjade]

@pypy 感谢支持，将会继续保持更新。
1. 这个建议很棒；我自己用的时候，也是经常要删除上一次的内容，不是很方便（要提上日程）；
2. 对于这一点，前两天有想了下，初步想是将图片上传至在线开源图床（有暴露之嫌），不知道这块有何建议呢；
3. 哇～，感谢；先集中精力完善了建议 1 和 2 后，探索探索。

[jeffjade]

@37Y37 感谢支持，🤝🤝。

[xiaowangge]

please config: options.upload.url

[Ellison]

我这广州电信第一次加载特别慢，而且加载的时候只有标题，页面一片空白

[jeffjade]

@xiaowangge 收到。因为初衷是想做成内容本地存储，而图片资源相对较大，存储于「在线图床」会是更好选择。但，目前还未想好用哪个（不知，可有什么建议不？）。

[jeffjade]

@Ellison 了解；目前网站是部署于 Github Pages 服务，首次在有些网络下可能会慢一些；后面如果用户多起来的话，会考虑迁移一份至自己的阿里云服务器，以提升国内用户使用体验。

[Nick66]

和 https://www.mdnice.com/ 有些类似，预览 PPT 能实现导出为 HTML 么？

[jeffjade]

@Nick66 嗯，感谢分享与反馈；预览 PPT，可以实现导出为 HTML，有需要的话，后面可以加上此功能。

[appreciatemp]

线上有个叫做作业部落的

[Heanes]

看着不错

[JssDream]

甘特图怎么用不了
```
gantt
title 项目开发流程
section 项目确定
需求分析 :a1, 2016-06-22, 3d
可行性报告 :after a1, 5d
概念验证 : 5d
```

[DAPTX4869]

果然还是不变的双屏风格...

[Exin]

建议加个 template 展示所有**特色**的功能，其他的 MD 编辑器都会这么做，

便于大家直观地评判、降低使用门槛

[chaoil]

希望可以有 typora 风格的，不是编辑一栏，预览一栏

[jeffjade]

@appreciatemp 对的，作业落是一款很不错的产品，我之前用的超多（包括他们客户端版本），美中不足的是，有些导出等高级功能是收费的。

[jeffjade]

@Heanes 🤝🤝欢迎使用体验 & 意见反馈。

[jeffjade]

@DAPTX4869 vditor 后续会增加「所见即所得」编辑模式，目前正在开发中： https://github.com/b3log/vditor/issues/121

[jeffjade]

@JssDream 绘制甘特图，需要加 mermaid 关键字标示下，如下面这样：

```mermaid
gantt
title 项目开发流程
section 项目确定
需求分析 :a1, 2016-06-22, 3d
可行性报告 :after a1, 5d
概念验证 : 5d
```

[jeffjade]

@chaoil 🤝指的是 typora 那种读写一体，「所见即所得」的编辑模式么？目前正在开发中，后续会加上。

[jeffjade]

@Exin 感谢建议。原本是做了，即默认文本内容（使用的时候，这个会被清除）；后面考虑再额外开一个页面予以说明吧。

[wpblank]

等一个所见即所得

[jeffjade]

@wpblank 👌，敬请期待，🤝🤝。

[JssDream]

@jeffjade OK,OK

[w4mxl]

简短使用后感觉挺好的，会收藏继续使用 ⛽️
ps.文章写的真好。排版、用词等 🎉

[aalikes95]

看介绍很不错啊

[jeffjade]

@w4mxl 🤝🙌感谢支持与反馈，会持续更新。

[jeffjade]

@aalikes95 🤝🙌 嗯，有些功能的确蛮实用的，欢迎试用。

[jeffjade]

@wpblank
@DAPTX4869
@chaoil
在最新的更新中，已经加入「所见即所得」编辑模式，欢迎体验（非默认）。

[wpblank]

@jeffjade 爱了爱了 下班回家试

[jeffjade]

@wpblank 👌。做一些简单的编辑挺好用，复杂的去图表等，却不是怎么便捷。

[standin000]

支持下！

[jeffjade]

@standin000 感谢，🤝。

[clino]

这个编辑器是停止开发了吗？

[jeffjade]

@clino 基于开源库 vidtor 而做的，后面基于 Obsidian （黑曜石 https://nicelinks.site/post/6266999577f8270876fcb3d6 ）来写文档、文章，就非常方便，因此这个就比较少维护了。

[clino]

谢谢！