vditor

下一代的 Markdown 编辑器，为未来而构建




        

💡 简介

Vditor 是一款浏览器端的 Markdown 编辑器，使用 TypeScript 实现。支持原生 JavaScript、Vue、React、Angular。

📽️ 背景

我们在开发 Sym 的初期是直接使用 WYSIWYG 富文本编辑器的。那时候基于 HTML 的编辑器非常流行，项目中引用起来也很方便，也符合用户当时的使用习惯。

后来，Markdown 的崛起逐步改变了大家的排版方式。再加上我们其他几个项目都是面向程序员用户的，所以迁移到 md 上也是大势所趋。我们选择了 CodeMirror，这是一款优秀的编辑器，它对开发者提供了丰富的编程接口，对各种浏览器的兼容性也比较好。

再后来，随着我们项目业务需求方面的沉淀，使用 CodeMirror 有时候会感到比较“笨重”。比如要实现 @自动完成用户名列表、插入 Emoji、上传文件等就需要比较深入的二次开发，而这些业务需求恰恰是很多项目场景共有且必备的。

终于，我们决定开始在 Sym 中自己实现编辑器。随着几个版本的迭代，Sym 的编辑器也日趋成熟。在我们运营的社区黑客派上陆续有人问我们是否能将编辑器单独抽离出来提供给大家使用。与此同时，我们的前端主程 V 同学对于维护分散在各个项目中的编辑器也感到有点力不从心，外加对 TypeScript 的好感，所以就决定使用 ts 来实现一个全新的浏览器端 md 编辑器。

于是，Vditor 就这样诞生了。

✨ 特性

• 所见即所得编辑模式（正在实现中）
• 支持任务列表、at、图表、流程图、甘特图、时序图、五线谱
• 插入原生 Emoji、设置常用表情列表
• 自定义工具栏按钮、提示、插入文案及快捷键
• 可使用拖拽、剪切板粘贴上传，显示实时上传进度
• 实时保存内容，防止意外丢失
• 录音支持，用户可直接发布语音
• 粘贴 HTML 自动转换为 Markdown
• 粘贴外链图片可通过指定接口上传到服务器
• 支持 CORS 跨域上传
• 提供实时预览、滚动同步定位
• 支持主窗口大小拖拽、字符计数
• 支持自定义 duplicate、delete 快捷键操作
• 多主题支持、内置黑白两套
• 多语言支持、内置中英文
• 支持主流浏览器和移动端

🗃 案例

• Sym：一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）平台
• Starfire：一个分布式的内容分享讨论社区，通过点对点超媒体协议让社区更快、更安全也更开放
• Solo：一款小而美的博客系统，使用 Java 实现
• Pipe：一款小而美的博客平台，使用 Go 实现

📜 文档

• 《提问的智慧》精读注解版
• Vditor 使用指南

🏘️ 社区

• 讨论区
• 报告问题

📄 授权

Vditor 使用 MIT 开源协议。

🙏 鸣谢

• Lute：🎼 一款结构化的 Markdown 引擎，支持 Go 和 JavaScript
• highlight.js：Javascript syntax highlighter
• Turndown：🛏 An HTML to Markdown converter written in JavaScript
• mermaid：Generation of diagram and flowchart from text in a similar manner as markdown
• incubator-echarts：A powerful, interactive charting and visualization library for browser
• abcjs：Javascript library for rendering standard music notation in a browser