markdown editor_基于 Vue+Vditor 所见即所得Markdown编辑器

今天给大家推荐一款超牛的Vue.js构建多功能markdown编辑器Arya。

9fbe0d6f2f63a8ee736cb718f8d0cb9a.png

markdown-online-editor 基于vue+vditor开发在线Markdown富文本编辑器，star高达1.1K+。支持绘制流程图、甘特图、任务列表、PPT预览、音视频解析等功能。

5b88b53b2510126ce23e1ee7ca493f52.gif

功能点

  • Markdown 自带基础功能；
  • 支持任务列表、流程图、甘特图等功能；
  • 支持粘贴 html 自动解析为 Markdown；
  • 支持本地存储内容，防止数据异常丢失；
  • 支持实时预览，内容统计；
  • 支持导出PDF、PNG、JPEG等；
  • 新加复制到公众号等其它功能；
1a1b50af7af5ba3aaf7f9edf60298b6c.png

安装使用

# 克隆项目git clone https://github.com/nicejade/markdown-online-editor.git# 进入目录cd markdown-online-editor# 安装依赖yarn install# 本地开发yarn start# 部署yarn deploy
5b6d9a9e1647d218a818517aa494d147.gif

所见即所得模式

2b2e2fb1908f3fe864d768539e8846d1.gif

分屏预览模式

694906a5013b78769992b600f2e55fa3.png
c48210a456bc36b8313e9d86def88100.png
6dc927b6010ab61e7482900c6014d88b.png

默认为分屏预览模式，可点击切换模式。

930ae8524ce7733c627a5ed894f9ee7a.png

支持预览、导出PNG、JPEG、PDF、PPT预览及导出HTML等功能。

0b09686f7895c7a5405d0fbdec34fb68.png

另外支持如下渲染效果。

7ef97845e6be4c83d275610f9a8ee8b2.png

so perfect，如此棒的功能不免有点小激动，忍不住要去尝试下，大家不可错过！

  • Vditor 一款浏览器端Markdown编辑器。
https://b3log.org/vditor/

最后附上在线示例及项目地址链接。

# 在线预览https://markdown.lovejade.cn/# 仓库地址https://github.com/nicejade/markdown-online-editor

ok，就介绍到这里。如果小伙伴们有需要或感兴趣，可以去看下哈！