All Projects → nicejade → Markdown Online Editor

nicejade / Markdown Online Editor

Licence: mit
📝基于 Vue、Vditor,所构建的在线 Markdown 编辑器,支持流程图、甘特图、时序图、任务列表、HTML 自动转换为 Markdown 等功能;🎉新增「所见即所得」编辑模式。

Projects that are alternatives of or similar to Markdown Online Editor

Vditor
♏ 一款浏览器端的 Markdown 编辑器。
Stars: ✭ 1,742 (+26.88%)
Mutual labels:  markdown, editor, flowchart
Editor.md
The open source embeddable online markdown editor (component).
Stars: ✭ 11,741 (+755.13%)
Mutual labels:  markdown, editor, flowchart
Stackedit.js
Add StackEdit to any website
Stars: ✭ 724 (-47.27%)
Mutual labels:  markdown, editor
Vue Simplemde
📝 Vue SimpleMDE - use simplemde with vue.js
Stars: ✭ 730 (-46.83%)
Mutual labels:  markdown, editor
Canner Slate Editor
📝Rich Text / WYSIWYG Editor built for Modularity and Extensibility.
Stars: ✭ 1,071 (-22%)
Mutual labels:  markdown, editor
React Markdown
Markdown editor (input) based on React
Stars: ✭ 98 (-92.86%)
Mutual labels:  markdown, editor
Django Markdownx
Comprehensive Markdown plugin built for Django
Stars: ✭ 657 (-52.15%)
Mutual labels:  markdown, editor
Thiefmd
The markdown editor worth stealing. Inspired by Ulysses, based on code from Quilter
Stars: ✭ 48 (-96.5%)
Mutual labels:  markdown, editor
React Simplemde Editor
React wrapper for simplemde markdown editor
Stars: ✭ 463 (-66.28%)
Mutual labels:  markdown, editor
React Native Markdown Editor
A markdown editor like github comment editor (contains preview, helper buttons)
Stars: ✭ 59 (-95.7%)
Mutual labels:  markdown, editor
Vnote
A pleasant note-taking platform.
Stars: ✭ 8,714 (+534.67%)
Mutual labels:  markdown, editor
Markdownxiaoshujiang
markdownxiaoshujiang
Stars: ✭ 1,188 (-13.47%)
Mutual labels:  markdown, editor
Wp Editor.md
或许这是一个WordPress中最好,最完美的Markdown编辑器
Stars: ✭ 624 (-54.55%)
Mutual labels:  markdown, editor
React Markdown Editor Lite
a light-weight Markdown editor based on React. 一款轻量的基于React的markdown编辑器
Stars: ✭ 553 (-59.72%)
Mutual labels:  markdown, editor
Electron Markdownify
📕 A minimal Markdown editor desktop app
Stars: ✭ 700 (-49.02%)
Mutual labels:  markdown, editor
Mavoneditor
mavonEditor - A markdown editor based on Vue that supports a variety of personalized features
Stars: ✭ 5,203 (+278.95%)
Mutual labels:  markdown, editor
Manuskript
A open-source tool for writers
Stars: ✭ 960 (-30.08%)
Mutual labels:  markdown, editor
Hypermd
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
Stars: ✭ 1,258 (-8.38%)
Mutual labels:  markdown, editor
Markdowneditor
Lightweight markdown editor written for windows,only one GREEN exe file
Stars: ✭ 403 (-70.65%)
Mutual labels:  markdown, editor
Mathdown
Collaborative markdown with math
Stars: ✭ 410 (-70.14%)
Mutual labels:  markdown, editor

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].