Home

Awesome

<p align="center"><a href="https://www.niceshare.site/?ref=github.com" target="_blank"><img width="100"src="https://cdn.jsdelivr.net/gh/nicejade/markdown-online-editor/src/assets/images/logo.png"></a></p> <h1 align="center"> <a href="https://markdown.lovejade.cn/?ref=github.com">Arya - 在线 Markdown 编辑器</a> </h1> <div align="center"> <strong> 📝 基于 Vue2、<a href="https://github.com/Vanessa219/vditor">Vditor</a>,所构建的在线 Markdown 编辑器,支持绘制流程图、甘特图、时序图、任务列表、echarts 图表、五线谱,以及 PPT 预览、视频音频解析、HTML 自动转换为 Markdown 等功能。<a href="https://markdown.lovejade.cn/?ref=github.com">markdown.lovejade.cn</a>。 </strong> </div> <br> <div align="center"> <a href="https://github.com/nicejade/markdown-online-editor"> <img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/nicejade/markdown-online-editor"> </a> <a href="https://github.com/nicejade/markdown-online-editor"> <img src="https://img.shields.io/github/license/nicejade/markdown-online-editor.svg" alt="LICENSE"> </a> <a href="https://prettier.io/"> <img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat" alt="Prettier"> </a> <a href="https://gitmoji.dev"> <img src="https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square" alt="Gitmoji" /> </a> <a href="https://www.jeffjade.com/2019/05/31/155-arya-markdown-online-editor/"> <img src="https://img.shields.io/badge/chat-on%20blog-brightgreen.svg" alt="Arya - 在线 Markdown 编辑器"> </a> <a href="https://v2ex.com/t/623128"> <img src="https://img.shields.io/badge/chat-on%20v2ex-brightgreen.svg" alt="Chat On V2ex"> </a> <a href="https://niceshare.site/?ref=github.com"> <img src="https://img.shields.io/badge/Author-nicejade-%23a696c8.svg" alt="Author nicejade"> </a> </div>

背景初衷

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

功能支持

如何使用

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

默认为所见即所得模式,可通过 ⌘-⇧-MCtrl-⇧-M)进行切换;或通过以下方式:

PPT 预览

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

如何部署?

采用 pm2 部署

PM2 是一个强大的生产环境进程管理器,它不仅支持通过命令行启动应用,还可以使用配置文件(通常名为 ecosystem.config.js)来管理复杂的部署场景。您可以通过执行如下命令实现快速部署:

# 🎉 克隆项目
git clone https://github.com/nicejade/markdown-online-editor.git
cd markdown-online-editor

# ➕ 安装依赖
yarn
yarn global add pm2

# 🔧 构建产物
yarn build

# 🚀 部署服务
cd dist
npx pm2 start "npx http-server -p 8866" --name "markdown-editor"

Docker 自托管

已将最新版本使用 Docker  打包镜像并上传至  Docker Hub,可通过如下方式进行使用:

docker run -d -p [Your-Specified-Port]:80 nicejade/markdown-online-editor:[tagname]

# 示例:
docker run -d -p 8866:80 nicejade/markdown-online-editor:latest

基于如上示例,如果您在本地执行,只需打开网址——http://localhost:8866 即可访问。如果在服务器运行,可以通过 http://[Server-IP]:8866 来访问。构建 Docker 镜像过程,可参见:如何为 markdown-online-editor 服务构建 docker 镜像?。您也可以通过 Cloudflare Pages 或 Github Pages,托管编译产物(dist 目录下内容),从而实现无需服务器情况下快速部署

或者使用 docker compose

创建一个 docker-compose.yml 文件,并在其中定义服务(其中 version: '3' 指定了 Docker Compose 文件的版本;您可以根据实际情况进行调整):

version: '3'
services:
  markdown-editor:
    image: nicejade/markdown-online-editor:2.1.0
    ports:
      - "8866:80"
    restart: always

在包含 docker-compose.yml 文件的目录中,运行以下命令启动服务:

docker-compose up -d

这将在后台启动服务,并且效果与下面的 docker run 命令相同。使用 Docker Compose 可以更方便地管理多个容器,并且配置更易读和维护。

如何开发

先决条件

说明用户在安装和使用前,需要准备的一些先决条件,譬如:您需要安装或升级 Node.js(>= 16.*,< 18.*),推荐使用 Pnpm 或 Yarn 作为首选包管理工具。

# 🎉 克隆项目
git clone https://github.com/nicejade/markdown-online-editor.git
cd markdown-online-editor

# ➕ 安装依赖
yarn

# 🚧 开始开发
yarn start

# 🚀 部署 Github Pages(需修改 commands/deploy.sh)
yarn deploy

特别鸣谢

Arya 的产生,得益于 Vditor:一款浏览器端的 Markdown 编辑器,同时也离不开 Vue、reveal.js 等开源库的支持,感谢 🙌。

相关链接

License

MIT

Copyright (c) 2018-present, nicejade.