Skip to content

📝 基于 Vue2、Vditor,所构建的在线 Markdown 编辑器,支持绘制流程图、甘特图、时序图、任务列表、echarts 图表、五线谱,以及 PPT 预览、视频音频解析、HTML 自动转换为 Markdown 等功能。https://www.niceshare.site/

License

Notifications You must be signed in to change notification settings

nicejade/markdown-online-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

58c38df · Apr 28, 2025
Jun 22, 2024
Jan 14, 2025
Apr 28, 2025
May 8, 2019
Sep 14, 2019
Jan 13, 2025
Feb 18, 2025
May 8, 2019
Apr 28, 2025
Jul 9, 2019
May 8, 2019
Feb 18, 2025
Apr 27, 2025
Mar 2, 2023
Apr 26, 2025

Repository files navigation

📝 基于 Vue2Vditor,所构建的在线 Markdown 编辑器,支持绘制流程图、甘特图、时序图、任务列表、Echarts 图表、五线谱,以及 PPT 预览、视频音频解析、HTML 自动转换为 Markdown 等功能。markdown.lovejade.cn

背景初衷

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

功能支持

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

如何使用

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

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

  • 所见即所得:⌘-⌥-7Ctrl-alt-7);
  • 即时渲染:⌘-⌥-8Ctrl-alt-8);
  • 分屏渲染:⌘-⌥-9Ctrl-alt-9);

PPT 预览

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

如何部署?

采用 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:latest
    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.

About

📝 基于 Vue2、Vditor,所构建的在线 Markdown 编辑器,支持绘制流程图、甘特图、时序图、任务列表、echarts 图表、五线谱,以及 PPT 预览、视频音频解析、HTML 自动转换为 Markdown 等功能。https://www.niceshare.site/

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published