❝

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

❞

背景

随着 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，如粘贴中包含外链图片可通过指定接口上传到服务器
• 支持主窗口大小拖拽、字符计数
• 多主题支持，内置黑白绿三套主题
• 多语言支持，内置中、英、韩文本地化
• 支持主流浏览器，对移动端友好

? 使用场景

• 完整示例
• 如何在 React 中使用
• 如何在 Vue 中使用
• 如何在 Angular 中使用

? 页面渲染

• 完整示例
• 自定义渲染
• 功能渲染 - Markdown2HTML/大纲/数学公式/脑图/图表/流程图/甘特图/时序图/五线谱/多媒体/代码高亮/代码复制/graphviz
• 渲染配置 - 锚点/语音阅读/图片懒加载/渲染前回调/渲染后回调

⚙️️ 基本配置

• 编辑模式 - wysiwyg/ir/sv
• 大小及自适应
• 多语言
• CDN 配置
• 回调事件 - 渲染完成/用户输入/聚焦/失焦/选择文字/ESC/Ctrl+Enter
• 实用小特性 - tab/打字机模式/默认展现大纲/内容为空的提示

? 高级配置

• Markdown 配置 - 自动空格/段落开头空两格/矫正术语/矫正标点/启用目录/禁用脚注/wysiwyg & ir 模式不渲染代码块/解析 settext/不过滤 XSS/主题/为列表添加标记
• 工具栏 - 自定义按钮/新增按钮/固定/隐藏
• 文件上传
• 预览 - 延迟解析/HTML 字符串处理/DOM 处理/预览请求
• 自动提示 - 自定义表情/表情图片地址/表情提示/@ 及其 debounce
• 字数统计 - Markdown/文本/最大字数提示
• 拖拽调整编辑器高度 - 启用/位于底部/位于顶部/拖拽结束回调
• 代码块高亮 - 启用高亮/代码块块样式/行号
• 数学公式 - KaTeX，MathJax 引擎切换/设置 MathJax 宏定义/允许 $ 后出现数字
• 本地缓存 - 设置默认值/设置缓存 ID/清除缓存/禁用缓存/启用缓存/缓存回调

? 基本方法

• 主题修改 - 编辑器/内容/代码块渲染/自定义主题
• 文本操作 - 更新内容/插入内容/选中指定内容/更新选中内容/删除选中内容/设置预览区域内容
• 获取 - Markdown/HTML/选中的文本/编辑器模式/光标位置/HTML->Markdown
• 其他方法 - 设置为只读/聚焦/失焦/消息提示

? 暖心示例

• 移动端最佳配置
• 多个编辑器共存
• 在 sv 模式下点击工具栏上的格式化可对 Markdwon 原文进行格式化
• 点击工具栏上的开发者工具可查看 Markdown 语法树

渲染图

地址

地址：https://www.itnavs.com/navdet/1393.html