点击右上方，关注开源中国OSC头条号，获取最新技术资讯

简介

Vditor 是一款浏览器端的 Markdown 编辑器，使用 TypeScript 实现。

背景

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

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

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

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

于是，Vditor 就这样诞生了。

功能

插入原生 Emoji、设置常用表情列表自定义工具栏按钮、提示、插入文案及快捷键可使用拖拽、剪切板粘贴上传，显示实时上传进度支持 CORS 跨域上传内容保存本地存储，防止意外丢失录音支持，用户可直接发布语音粘贴 HTML 自动转换为 Markdown提供实时预览、滚动同步定位支持主窗口大小拖拽、字符计数多主题支持、内置黑白两套多语言支持、内置中英文支持主流浏览器和移动端

案例

Sym：一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）平台Solo：一款小而美的博客系统，使用 Java 实现Pipe：一款小而美的博客平台，使用 Go 实现

文档

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

授权

Vditor 使用 MIT 开源协议。

社区

讨论区报告问题

鸣谢

Markdown：轻量级纯文本排版语言TypeScript：类型化的 JavaScript 超集Turndown：HTML 到 Markdown 的转换器RecordRTC：多媒体录制库

开源社区OSC头条号，每日推送最新优质的技术类文章，涵盖外文翻译，软件更新，技术博客等优质内容。关注开源社区OSC头条号，每日获取最新技术资讯，点击“了解更多”阅读原文章。

↓↓↓