Vditor-下一代的 Markdown编辑器

作者：羊先生

浏览次数：16549次

创建时间：2020年07月13日星期一

> Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供[桌面版](https://github.com/88250/liandi)

![Markdown ](https://www.vipbic.com/uploads/20200713/33c4734edeae8d1d7bd87552d9fc6130.png)

### 背景
随着 Markdown 排版方式的普及，越来越多的应用开始集成 Markdown 编辑器。目前主流可集成的 Markdown 编辑器现状如下：

- 有的仅支持分屏预览，即编辑区和预览区分离
- 有的同时支持所见即所得和分屏预览，但所见即所得模式下不能完整支持 Markdown 语法排版
- 几乎没有类似 Typora 的即时渲染

而这三点恰好对应了三种应用场景：
- 分屏预览：适配传统的 Markdown 使用场景，适合大屏下编辑排版
- 所见即所得：对不熟悉 Markdown 的用户友好，熟悉 Markdown 的用户也可以无缝使用
- 即时渲染：理论上这是最为优雅的 Markdown 编辑方式，让熟悉 Markdown 的用户能够更专注于内容创作

所以，一个能够适配应用场景的 Markdown 编辑器至关重要，它需要考虑到：

- 传统 Markdown 用户的使用场景，提供分屏预览
- 富文本编辑用户的使用场景，提供所见即所得
- 高阶 Markdown 用户的使用场景，提供即时渲染

Vditor 在这些方面做了努力，希望能为现代化的通用 Markdown 编辑领域做出一些贡献

### 特性

- 支持三种编辑模式：所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）
- 支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染
- 内置安全过滤、导出、图片懒加载、任务列表、at、多平台预览、多主题切换、复制到微信公众号功能
- 实现 CommonMark 和 GFM 规范，可对 Markdown 进行格式化和语法树查看，并支持 10+ 项配置
- 工具栏包含 36+ 项操作，除支持扩展外还可对每一项中的快捷键、提示、提示位置、图标、点击事件、类名、子工具栏进行自定义
- 表情自动补全，设置常用表情，支持表情自定义
- 可使用拖拽、剪切板粘贴上传，显示实时上传进度，支持 CORS 跨域上传
- 实时保存内容，防止意外丢失
- 录音支持，用户可直接发布语音
- 粘贴 HTML 自动转换为 Markdown，如粘贴中包含外链图片可通过指定接口上传到服务器
- 支持主窗口大小拖拽、字符计数
- 多主题支持，内置黑白绿三套主题
- 多语言支持，内置中、英、韩文本地化
- 支持主流浏览器，对移动端友好

### 使用场景
- [完整示例](https://hacpai.com/guide/markdown)
- [如何在 React 中使用](https://vditor.b3log.org/demo/react.html)
- [如何在 Vue 中使用](https://vditor.b3log.org/demo/vue.html)
- [如何在 Angular 中使用](https://vditor.b3log.org/demo/angular/dist/index.html)
### 页面渲染
- [完整示例](https://vditor.b3log.org/demo/preview.html)
- [自定义渲染](https://vditor.b3log.org/demo/preview-custom.html)
- [功能渲染](https://vditor.b3log.org/demo/preview-render.html) - Markdown2HTML/大纲/数学公式/脑图/图表/流程图/甘特图/时序图/五线谱/多媒体/代码高亮/代码复制/graphviz
- [渲染配置](https://vditor.b3log.org/demo/preview-config.html) - 锚点/语音阅读/图片懒加载/渲染前回调/渲染后回调
### ⚙️️ 基本配置
- [编辑模式](https://vditor.b3log.org/demo/option-mode.html) - wysiwyg/ir/sv
- [大小及自适应](https://vditor.b3log.org/demo/option-size.html)
- [多语言](https://vditor.b3log.org/demo/option-lang.html)
- [CDN 配置](https://hacpai.com/article/1549638745630#CDN-%E5%88%87%E6%8D%A2)
- [回调事件](https://vditor.b3log.org/demo/option-callback.html) - 渲染完成/用户输入/聚焦/失焦/选择文字/ESC/Ctrl+Enter
- [实用小特性](https://vditor.b3log.org/demo/option-other.html) - tab/打字机模式/默认展现大纲/内容为空的提示
### 高级配置
- [Markdown 配置](https://vditor.b3log.org/demo/advanced-markdown.html) - 自动空格/段落开头空两格/矫正术语/矫正标点/启用目录/禁用脚注/wysiwyg & ir 模式不渲染代码块/解析 settext/不过滤 XSS/主题/为列表添加标记
- [工具栏](https://vditor.b3log.org/demo/advanced-toolbar.html) - 自定义按钮/新增按钮/固定/隐藏
- [文件上传](https://vditor.b3log.org/demo/advanced-upload.html)
- [预览](https://vditor.b3log.org/demo/advanced-preview.html) - 延迟解析/HTML 字符串处理/DOM 处理/预览请求
- [自动提示](https://vditor.b3log.org/demo/advanced-hint.html) - 自定义表情/表情图片地址/表情提示/@ 及其 debounce
- [字数统计](https://vditor.b3log.org/demo/advanced-counter.html) - Markdown/文本/最大字数提示
- [拖拽调整编辑器高度](https://vditor.b3log.org/demo/advanced-resize.html) - 启用/位于底部/位于顶部/拖拽结束回调
- [代码块高亮](https://vditor.b3log.org/demo/advanced-hljs.html) - 启用高亮/代码块块样式/行号
- [数学公式](https://vditor.b3log.org/demo/advanced-math.html) - KaTeX，MathJax 引擎切换/设置 MathJax 宏定义/允许 $ 后出现数字
- [本地缓存](https://vditor.b3log.org/demo/advanced-cache.html) - 设置默认值/设置缓存 ID/清除缓存/禁用缓存/启用缓存/缓存回调
### 基本方法
- [主题修改](https://vditor.b3log.org/demo/method-theme.html) - 编辑器/内容/代码块渲染/自定义主题
- [文本操作](https://vditor.b3log.org/demo/method-CRUD.html) - 更新内容/插入内容/选中指定内容/更新选中内容/删除选中内容/设置预览区域内容
- [获取](https://vditor.b3log.org/demo/method-get.html) - Markdown/HTML/选中的文本/编辑器模式/光标位置/HTML->Markdown
- [其他方法](https://vditor.b3log.org/demo/method-other.html) - 设置为只读/聚焦/失焦/消息提示
### 暖心示例
- [移动端最佳配置](https://vditor.b3log.org/demo/sweet-mobile.html)
- [多个编辑器共存](https://vditor.b3log.org/demo/sweet-two.html)
- 在 sv 模式下点击工具栏上的格式化可对 Markdwon 原文进行格式化
- 点击工具栏上的开发者工具可查看 Markdown 语法树

### 渲染图
[![UXlTi.png](https://s3.jpg.cm/2020/07/13/UXlTi.png)](https://imagelol.com/image/UXlTi)