• Stars
    star
    2,402
  • Rank 19,146 (Top 0.4 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 5 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

Arya - 在线 Markdown 编辑器

📝 基于 VueVditor,所构建的在线 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);
  • 🌟 新增复制到微信公众号等周边功能;

如何使用

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

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

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

PPT 预览

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

Docker 自托管

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

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

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

基于如上示例,如果您在本地执行,只需打开网址——http://localhost:8866 即可访问。如果在服务器运行,可以通过 http://[Server-IP]:8866 来访问,如果要配备域名,可通过。构建 Docker 镜像过程,可参见:如何为 markdown-online-editor 服务构建 docker 镜像?

如何开发

# 🎉 克隆项目
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 的产生,得益于 vditor:一款浏览器端的 Md 编辑器,同时也离不开 vue、reveal.js 等开源库的支持,感谢 🙌。

相关链接

微信公众号 前端微信群 推荐 Web 应用 推荐小程序
😉 静晴轩 ✨ 大前端联盟 🎉 倾城之链 🌊 倾城之链
静晴轩 倾城之链 倾城之链 倾城之链

License

MIT

Copyright (c) 2018-present, nicejade.

More Repositories

1

nice-front-end-tutorial

🌍 Constantly updated front-end resources, tutorials, opinions(与时俱进版前端资源,教程和意见。)
914
star
2

vue-boilerplate-template

🍎 Efficient development of web SPA using Vue.js(2.*) + Webpack + Element-ui + Pwa + Vuex + Vuex-router + Vue-i18n + Dayjs + Lodash.
JavaScript
471
star
3

awesome-vue-cli3-example

🦅 Awesome example for rapid Vue.js development using vue-cli3 .
Vue
168
star
4

nicelinks-vue-client

🐬 很棒的 Web 应用——倾城之链(NICE LINKS),基于 Vue2.*(vuex、Webpack4、ES6、Element-UI)所构建。
Vue
140
star
5

toss-puppeteer

🦀Try all kinds of toss about using GoogleChrome puppeteer(尝试各种折腾使用GoogleChrome puppeteer(木偶))
JavaScript
128
star
6

nicelinks-weekly

基于 Deno、TypeScript 编写,一键生成「倾城之链(旨在云集全球优质网站)」周刊文章,每周五发布。https://blog.nicelinks.site/
TypeScript
94
star
7

quickapp-boilerplate-template

🔨致力于构建更为优雅的「快应用」开发脚手架模板。https://quickapp.lovejade.cn/tag/quickapp/
JavaScript
74
star
8

vuepress-web-app

📝 采用 VuePress 构建的 Web 应用程序,支持 Pwa、Github Issues 评论、Prettier Markdown 等。
Shell
68
star
9

awesome-quickapp

🛠 A curated list of awesome quickapp tutorials, articles, projects and resources.
47
star
10

docker-vue-node-nginx-mongodb-redis

🐉 An awesome boilerplate, Integrated Docker, Vue, Node, Nginx, Mongodb and Redis in one, Designed to develop & build your web applications more efficient and elegant.
JavaScript
45
star
11

arya-jarvis

🛠 Designed to save developers more time and energy. https://www.jeffjade.com/
JavaScript
41
star
12

sublime_packages

✍️ SublimeText Pageages Backups For Front-End Developer
Python
37
star
13

nicelinks-quick-app

🌪Awesome NICE LINKS(倾城之链) client built with quickapp(快应用).
JavaScript
28
star
14

arya-jarvis-doc

Arya Jarvis:旨在为开发人员节省更多时间和精力(Document)
23
star
15

chatgpt.nicelinks.site

素问智聊斋,非官方 ChatGPT 在线客户端,旨在提供更便捷的 ChatGPT 访问体验;它基于非官方 ChatGPT API、Svelte、TailwindCSS、Vite 和 NodeJS 所搭建;无需账号,零配置,即可与 ChatGPT 畅聊;支持自定义 OPENAI API KEY。
Svelte
20
star
16

puppeteer-robot

🤖基于 Puppeteer 所构建的简易机器人,以帮助自动化完成些精确性事务。
JavaScript
15
star
17

vue-common-components

Simple and common Vue1.* components,It has been stopped maintenance long ago(!已停止维护).
Vue
15
star
18

markdown2png

简单好用的在线文本工具;支持将 Markdown、rich text、word 等格式内容,快速转化为 png、pdf、html 等文件,并支持一键下载、自定义设置等功能。
Vue
14
star
19

www.lovejade.cn

🌊幽居空谷轩:集中展示个人些许博客、作品及文章 https://www.jeffjade.com | https://quickapp.lovejade.cn | https://nice.lovejade.cn
Shell
12
star
20

sentences-monthly-newsletter

人生最曼妙的风景,是内心的淡定与从容。曼妙句子,旨在云集世间摇曳生姿的文字,或情感、或唯美、或修身、或励志、或哲学、或娱乐,拳拳真情,精心择选,总有荡漾你心的那一言。https://read.lovejade.cn/
TypeScript
11
star
21

about-me

主页:倾城之链作者,晚晴幽草轩轩主,天意人间舫舫主,静晴轩别苑博主,静轩之别苑博主。
CSS
10
star
22

read.lovejade.cn

箴言锦语,云集世间曼妙句子;或情感、或唯美、或修身、或励志、或哲学、或娱乐,拳拳真情,精心择选,总有荡漾你心的那一言。 https://read.lovejade.cn
JavaScript
10
star
23

nice-jade-collecting

Nice Jade Collecting(Excellent Article / Scripts / Tools / Web-site)
JavaScript
9
star
24

play-with-python

学习 Python & 实战练习,以便能更好的玩 Python 相关技能、工具。
Python
9
star
25

prettier-plugin-quickapp

Prettier Quickapp Plugin .
JavaScript
9
star
26

nicelinks-miniprogram

基于 mpvue 所构建的小程序版本「倾城之链」,https://nicelinks.site
Vue
7
star
27

docz-web-app

📝 Web applications built with Docz ( 采用 Docz 构建的 Web 应用程序 ).
JavaScript
6
star
28

responsive-email-template

Make better response mail templates
JavaScript
5
star
29

nicejade

My GitHub Profile README. https://www.jeffjade.com/
5
star
30

jadeblog-backups

The use of Gitalk, record the visitor comments on the blog(晚晴幽草轩) content.
5
star
31

resume

🇨🇳 personal resume
4
star
32

prerender-spa-server

For serving your prerendered HTML to crawlers for SEO, through Prerender & Redis & Nginx.
JavaScript
4
star
33

simple-resume-tpl

Create an simple resume template used to practice the Foundation framework
JavaScript
4
star
34

experience-precipitate

🏹 On the knowledge, tools, thinking and so on experience precipitation.
3
star
35

blog.nicelinks.site

基于 GatsbyJS 所搭建的网站,用来承载「倾城之链」周刊,https://blog.nicelinks.site 。
JavaScript
3
star
36

screenshot-and-upload-to-ali-oss

Take a screenshot of the site's homepage, compress it, and upload it to ali oss.
JavaScript
2
star
37

micro-web-component

🌌 Micro web component used to show miniprogram code. https://nicelinks.site/
JavaScript
2
star
38

quickapp-deeplink

JavaScript
2
star
39

fine.niceshare.site

吾生有涯,而知无涯;缘知而往,随心以行;上下求索,探寻自然;沉淀于此,云证前言。
MDX
2
star
40

ad-block-remind

A pop-up box reminding users who install the Ad Block Plus plugin to request a whitelist. Built on Web component. https://nicelinks.site/
JavaScript
2
star
41

play-with-docker

🐳Recording learn & use Docker to do some interesting things.
JavaScript
1
star
42

graceful-sentences-miniprogram

基于 mpvue 所构建的「曼妙句子」小程序版本 。https://read.lovejade.cn/
JavaScript
1
star
43

reward-service

通过 WebComponent 所构建的打赏服务,使之可以轻松植入自己的各个 Web 网站。
JavaScript
1
star
44

homepage

Based on Astro, Starlight, Svelte, Markdown, MDX, TailwindCSS, TypeScript built personal homepage, Fast, accessible, and easy-to-use, Highly customizable . | 基于 Astro, Starlight, Svelte, Markdown, MDX,TailwindCSS, TypeScript 所构建的个人主页,快速、易用、易于访问、高度可定制。https://niceshare.site/
TypeScript
1
star