{"id":13454534,"url":"https://github.com/nicejade/markdown-online-editor","last_synced_at":"2025-05-14T04:08:44.607Z","repository":{"id":38237996,"uuid":"185532301","full_name":"nicejade/markdown-online-editor","owner":"nicejade","description":"📝 基于 Vue2、Vditor，所构建的在线 Markdown 编辑器，支持绘制流程图、甘特图、时序图、任务列表、echarts 图表、五线谱，以及 PPT 预览、视频音频解析、HTML 自动转换为 Markdown 等功能。https://www.niceshare.site/","archived":false,"fork":false,"pushed_at":"2025-04-21T14:33:05.000Z","size":2727,"stargazers_count":2762,"open_issues_count":28,"forks_count":375,"subscribers_count":44,"default_branch":"master","last_synced_at":"2025-04-21T15:36:26.713Z","etag":null,"topics":["editor","flowchart","gantt-diagram","markdown","sequence-diagram","to-do-list","vditor","vue"],"latest_commit_sha":null,"homepage":"https://markdown.lovejade.cn/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicejade.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-08T05:10:40.000Z","updated_at":"2025-04-21T15:17:34.000Z","dependencies_parsed_at":"2024-08-06T11:17:28.313Z","dependency_job_id":"f428a636-6f41-4319-bee5-d35c0bf32de5","html_url":"https://github.com/nicejade/markdown-online-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fmarkdown-online-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fmarkdown-online-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fmarkdown-online-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fmarkdown-online-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicejade","download_url":"https://codeload.github.com/nicejade/markdown-online-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254069907,"owners_count":22009558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","flowchart","gantt-diagram","markdown","sequence-diagram","to-do-list","vditor","vue"],"created_at":"2024-07-31T08:00:55.082Z","updated_at":"2025-05-14T04:08:39.591Z","avatar_url":"https://github.com/nicejade.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://www.niceshare.site/?ref=github.com\" target=\"_blank\"\u003e\u003cimg width=\"100\"src=\"https://cdn.jsdelivr.net/gh/nicejade/markdown-online-editor/src/assets/images/logo.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://markdown.lovejade.cn/?ref=github.com\"\u003eArya - 在线 Markdown 编辑器\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003e\n    📝 基于 \u003ca href=\"https://site.lovejade.cn/post/5b1a221c0526c920d6dfaada\"\u003eVue2\u003c/a\u003e、\u003ca href=\"https://github.com/Vanessa219/vditor\"\u003eVditor\u003c/a\u003e，所构建的在线 Markdown 编辑器，支持绘制流程图、甘特图、时序图、任务列表、Echarts 图表、五线谱，以及 PPT 预览、视频音频解析、HTML 自动转换为 Markdown 等功能。\u003ca href=\"https://markdown.lovejade.cn/?ref=github.com\"\u003emarkdown.lovejade.cn\u003c/a\u003e。\n  \u003c/strong\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/nicejade/markdown-online-editor\"\u003e\n    \u003cimg alt=\"GitHub package.json version\" src=\"https://img.shields.io/github/package-json/v/nicejade/markdown-online-editor\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/nicejade/markdown-online-editor\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/nicejade/markdown-online-editor.svg\" alt=\"LICENSE\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://prettier.io/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat\" alt=\"Prettier\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://gitmoji.dev\"\u003e\n    \u003cimg\n      src=\"https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square\"\n      alt=\"Gitmoji\"\n    /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.jeffjade.com/2019/05/31/155-arya-markdown-online-editor/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/chat-on%20blog-brightgreen.svg\" alt=\"Arya - 在线 Markdown 编辑器\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://v2ex.com/t/623128\"\u003e\n   \u003cimg src=\"https://img.shields.io/badge/chat-on%20v2ex-brightgreen.svg\" alt=\"Chat On V2ex\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://niceshare.site/?ref=github.com\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Author-nicejade-%23a696c8.svg\" alt=\"Author nicejade\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## 背景初衷\n\n早期就有关注到由`黑客派`所出品的 [Vditor](https://github.com/Vanessa219/vditor)：一款为未来而构建的下一代 Markdown 编辑器。然，现而今市面上所存在的 Markdown 编辑器，或多或少都存在一些问题（或功能不全，或高级功能收费...），因此基于自身所需，加之 [Vditor](https://github.com/Vanessa219/vditor) 的强大，就诞生了做一款[在线 Markdown 编辑器](https://markdown.lovejade.cn/?ref=github.com) 的念头；取其名曰 [`Arya`（二丫）](https://quickapp.lovejade.cn/talking-game-of-thrones/?ref=github.com)。\n\n## 功能支持\n\n- [x] 🎉 通常 `Markdown` 解析器自带的基本功能；\n- [x] 🍀 支持**流程图**、**甘特图**、**时序图**、**任务列表**；\n- [x] 🏁 支持粘贴 HTML 自动转换为 Markdown；\n- [x] 💃🏻 支持插入原生 Emoji、设置常用表情列表；\n- [x] 🚑 支持编辑内容保存**本地存储**，防止意外丢失；\n- [x] 📝 支持**实时预览**，主窗口大小拖拽，字符计数；\n- [x] 🛠 支持常用快捷键(**Tab**)，及代码块添加复制；\n- [x] ✨ 支持**导出**携带样式的 PDF、PNG、JPEG 等；\n- [x] ✨ 升级 Vditor，新增对 `echarts` 图表的支持；\n- [x] ✨ 注入 [RevealJs](https://revealjs.com/#/)，增设对 `PPT` 预览支持；\n- [x] 👏 支持检查并格式化 Markdown 语法，使其专业；\n- [x] 🦑 支持五线谱、及[部分站点、视频、音频解析](https://github.com/Vanessa219/vditor)；\n- [x] 🌟 增加对**所见即所得**编辑模式的支持(`⌘-⇧-M`)；\n- [x] 🌟 新增复制到微信公众号等周边功能；\n\n## 如何使用\n\n清空目前 [Arya](https://markdown.lovejade.cn/?ref=github.com) 编辑区默认文档，即可使用。\n\n默认为[所见即所得](https://b3log.org/vditor/)模式，可通过 `⌘-⇧-M`（`Ctrl-⇧-M`）进行切换；或通过以下方式：\n\n- 所见即所得：`⌘-⌥-7`（`Ctrl-alt-7`）；\n- 即时渲染：`⌘-⌥-8`（`Ctrl-alt-8`）；\n- 分屏渲染：`⌘-⌥-9`（`Ctrl-alt-9`）；\n\n### PPT 预览\n\n如果您用作 `PPT` 预览（入口在`设置`中），需要注意，这里暂还不能支持各种图表的渲染；您可以使用 `---` 来定义水平方向上幻灯片，用 `--` 来定义垂直幻灯片；更多设定可以参见 [Reveal.js Markdown 文档](https://revealjs.com/markdown/)。\n\n## 如何部署？\n\n### 采用 [pm2](https://pm2.keymetrics.io/) 部署\n\nPM2 是一个强大的生产环境进程管理器，它不仅支持通过命令行启动应用，还可以使用配置文件（通常名为 `ecosystem.config.js`）来管理复杂的部署场景。您可以通过执行如下命令实现快速部署：\n\n```bash\n# 🎉 克隆项目\ngit clone https://github.com/nicejade/markdown-online-editor.git\ncd markdown-online-editor\n\n# ➕ 安装依赖\nyarn\nyarn global add pm2\n\n# 🔧 构建产物\nyarn build\n\n# 🚀 部署服务\ncd dist\nnpx pm2 start \"npx http-server -p 8866\" --name \"markdown-editor\"\n```\n\n### Docker 自托管\n\n已将最新版本使用 [Docker](https://docs.docker.com/engine/install/)  打包镜像并上传至  [Docker Hub](https://hub.docker.com/r/nicejade/markdown-online-editor)，可通过如下方式进行使用：\n\n```shell\ndocker run -d -p [Your-Specified-Port]:80 nicejade/markdown-online-editor:[tagname]\n\n# 示例：\ndocker run -d -p 8866:80 nicejade/markdown-online-editor:latest\n```\n\n基于如上示例，如果您在本地执行，只需打开网址——[http://localhost:8866](http://localhost:8866/) 即可访问。如果在服务器运行，可以通过 http://[Server-IP]:8866 来访问。构建 Docker 镜像过程，可参见：[如何为 markdown-online-editor 服务构建 docker 镜像？](https://memo.lovejade.cn/m/244)。您也可以通过 **Cloudflare Pages** 或 Github Pages，托管编译产物（`dist` 目录下内容），从而实现**无需服务器情况下快速部署**。\n\n或者**使用 [docker compose](https://docs.docker.com/compose/)**：\n\n创建一个 `docker-compose.yml` 文件，并在其中定义服务（其中 version: '3' 指定了 Docker Compose 文件的版本；您可以根据实际情况进行调整）：\n\n```yaml\nversion: '3'\nservices:\n  markdown-editor:\n    image: nicejade/markdown-online-editor:2.1.0\n    ports:\n      - '8866:80'\n    restart: always\n```\n\n在包含 `docker-compose.yml` 文件的目录中，运行以下命令启动服务：\n\n```bash\ndocker-compose up -d\n```\n\n这将在后台启动服务，并且效果与下面的  `docker run`  命令相同。使用 Docker Compose 可以更方便地管理多个容器，并且配置更易读和维护。\n\n## 如何开发\n\n### 先决条件\n\n说明用户在安装和使用前，需要准备的一些先决条件，譬如：您需要安装或升级  [Node.js](https://nodejs.org/en/)（\u003e= `16.*`，\u003c `18.*`），推荐使用  [Pnpm](https://pnpm.io/)  或  [Yarn](https://www.jeffjade.com/2017/12/30/135-npm-vs-yarn-detial-memo/)  作为首选包管理工具。\n\n```bash\n# 🎉 克隆项目\ngit clone https://github.com/nicejade/markdown-online-editor.git\ncd markdown-online-editor\n\n# ➕ 安装依赖\nyarn\n\n# 🚧 开始开发\nyarn start\n\n# 🚀 部署 Github Pages(需修改 commands/deploy.sh)\nyarn deploy\n```\n\n## 特别鸣谢\n\n[Arya](https://markdown.lovejade.cn/?utm_source=github.com) 的产生，得益于 [Vditor](https://github.com/b3log/vditor)：一款浏览器端的 Markdown 编辑器，同时也离不开 [Vue、reveal.js 等开源库](https://github.com/nicejade/markdown-online-editor/blob/master/package.json#L25-L64)的支持，感谢 🙌。\n\n## 相关链接\n\n- [清风明月轩](https://www.thebettersites.com/?ref=github.com)\n- [逍遥自在轩](https://www.niceshare.site/?ref=github.com)\n- [晚晴幽草轩](https://www.jeffjade.com/nicelinks?ref=github.com)\n- [缘知随心庭](https://fine.niceshare.site/?ref=github.com)\n- [静轩之别苑](https://quickapp.lovejade.cn/?ref=github.com)\n- [悠然宜想亭](https://forum.lovejade.cn/?ref=github.com)\n- [SegmentFault](https://segmentfault.com/u/jeffjade)\n- [X（Twitter）](https://x.com/MarshalXuan)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2018-present, [nicejade](https://niceshare.site/?ref=github.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicejade%2Fmarkdown-online-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicejade%2Fmarkdown-online-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicejade%2Fmarkdown-online-editor/lists"}