Arya,是一款基于 VueVditor,为未来而构建的在线 Markdown 编辑器;轻量且强大:内置粘贴 HTML 自动转换为 Markdown,支持流程图、甘特图、时序图、任务列表,可导出携带样式的图片、PDF、以及转换 Markdown 成微信公众号特制的 HTML 等;另外支持实时预览本地存储、字符计数,提供常用快捷键(含Tab),及代码块添加复制等功能。

Arya - 在线 Markdown 编辑器

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

背景初衷

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

功能支持🎉

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

如何使用

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

PPT 预览

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

如何开发

1
2
3
4
5
6
7
8
9
10
11
12
# 🎉 克隆项目
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 安装注意事项

关于定位📌

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

额外补充,因为数据使它们更具说服力且易于理解,能够将可视化嵌入到文本中的技术非常重要;受益于 markvis (make visualization in markdown.) 的启发,完全可以将 Arya 中内置 d3 等可视化库,从而使用户可以更加方便,在 Arya Markdown 中进行数据可视化操作;再辅之以导出功能,哇哦,至少这些功能于我而言,是超有用的存在。另外,很多同学,在写中文文案时候,不太会注重格式,如中英文间未有空格等;后面 Arya 也会考虑注入自动格式化文档的功能….. 诸此等等;此篇文章,也会随之而来的新想法、新功能以及其他新建议,而不断完善;总之呢,敬请期待。(2019.06.02)

于 2019 年 5 月 19 号,深圳.福田;last modify: 2019.06.02。

相关链接

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

您可能会感兴趣的文章


静晴轩 ~ 晚晴幽草轩
个人微信公众号晚晴幽草轩;名字取自:“天意怜幽草,人间重晚晴”。
专注互联网开发(Web 大前端、快应用、小程序),以及分享优质网站、AI 应用、效率工具、心得感悟等内容。

文章目录
  1. 1. 背景初衷
  2. 2. 功能支持🎉
  3. 3. 如何使用
    1. 3.1. PPT 预览
  4. 4. 如何开发
  5. 5. 关于定位📌
  6. 6. 相关链接
    1. 6.1. 您可能会感兴趣的文章