基于 Vue、Vditor,所构建的在线 MD 编辑器,支持绘制流程图、甘特图、时序图、任务列表、echarts 图表、五线谱,以及 PPT 预览、视频音频解析、HTML 自动转换为 Markdown、制到微信公众号、所见即所得编辑模式等功能。
背景初衷
早先有关注黑客派[1]所出品的 Vditor[2]:一款为未来而构建的下一代 Markdown[3] 编辑器。然,现而今市面上所存在的 Markdown[4] 编辑器,或多或少都存在一些问题(或功能不全,或高级功能收费...),因此基于自身所需,加之 Vditor[5] 的强大,就诞生了做一款在线 Markdown 编辑器[6] 的念头;取其名曰 Arya
(二丫)。
功能支持
- ? 通常
Markdown
解析器自带的基本功能; - ? 支持流程图、甘特图、时序图、任务列表;
- ? 支持粘贴 HTML 自动转换为 Markdown;
- ?? 支持插入原生 Emoji、设置常用表情列表;
- ? 支持编辑内容保存本地存储,防止意外丢失;
- ? 支持实时预览,主窗口大小拖拽,字符计数;
- ? 支持常用快捷键(Tab),及代码块添加复制;
- ✨ 支持导出携带样式的 PDF、PNG、JPEG 等;
- ✨ 升级 Vditor,新增对
echarts
图表的支持; - ✨ 注入 RevealJs[7],增设对
PPT
预览支持; - ? 支持检查并格式化 Markdown 语法,使其专业;
- ? 支持五线谱、及部分站点、视频、音频解析[8];
- ? 增加对所见即所得编辑模式的支持(
⌘-⇧-M
); - ? 新增复制到微信公众号、知乎等周边功能;
如何使用
清空目前 Arya[9] 编辑区默认文档,即可使用。
默认为所见即所得[10]模式,可通过 ⌘-⇧-M
(Ctrl-⇧-M
)进行切换;或通过以下方式:
- 所见即所得:
⌘-⌥-7
(Ctrl-alt-7
); - 即时渲染:
⌘-⌥-8
(Ctrl-alt-8
); - 分屏渲染:
⌘-⌥-9
(Ctrl-alt-9
);
PPT 预览
如果您用作 PPT
预览(入口在设置
中),需要注意,这里暂时还不能支持各种图表的渲染;您可以使用 ---
来定义水平方向上幻灯片,用 --
来定义垂直幻灯片;更多设定可以参见 RevealJs 文档[11]。
如何开发
# ? 克隆项目
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
特别鸣谢
Arya[12] 的产生,得益于 vditor[13]:一款浏览器端的 Markdown 编辑器,同时也离不开 vue、reveal.js 等开源库[14]的支持,感谢 ?。
如果您在电脑端进行编辑工作,这款在线 Markdown 编辑器,非常适合。笔者在写这篇分享,就是使用 Arya 完成。最为常用的功能是:HTML 自动转换为 Markdown。
倾城之链,作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。
参考资料
[1]黑客派: https://hacpai.com/?utm_source=github.com
[2]Vditor: https://hacpai.com/tag/vditor?utm_source=github.com// 省略若干.....
[13]vditor: https://github.com/b3log/vditor
[14]vue、reveal.js 等开源库: https://github.com/nicejade/markdown-online-editor/blob/master/package.json#L25-L64