@yltrcc/vditor

v0.3.8

Published

a month ago

TypeScript 实现的浏览器端 Markdown 编辑器

0High
0Medium
0Low

yltrcc

editor markdown b3log

yl-vditor 技术架构文档

TypeScript 实现的浏览器端 Markdown 编辑器。

项目概述

yl-vditor 是一个基于 TypeScript 开发的浏览器端 Markdown 编辑器，支持三种编辑模式：WYSIWYG（所见即所得）、IR（即时渲染）、SV（分屏预览）。

核心特点：

使用 TypeScript 实现
基于 Lute 引擎进行 Markdown 解析
支持模块化扩展
支持多种框架集成

核心目录结构

yl-vditor/
├── src/
│   ├── index.ts              # 主入口，Vditor 类
│   ├── method.ts             # 静态工具方法
│   ├── assets/               # 静态资源
│   │   ├── less/            # 样式文件
│   │   ├── images/          # 图片资源
│   │   └── js/              # 第三方库 (highlight, katex, mermaid, lute 等)
│   └── ts/                   # TypeScript 源码
│       ├── constants.ts      # 常量定义
│       ├── ir/               # IR 模式 (即时渲染模式)
│       ├── sv/               # SV 模式 (分屏预览模式)
│       ├── wysiwyg/          # WYSIWYG 模式 (所见即所得)
│       ├── toolbar/          # 工具栏
│       ├── markdown/         # Markdown 渲染相关
│       ├── preview/          # 预览相关
│       ├── hint/             # 提示补全
│       ├── upload/           # 文件上传
│       ├── undo/             # 撤销重做
│       ├── util/             # 工具函数
│       └── ui/               # UI 相关
└── package.json

三种编辑模式

| 模式 | 名称 | 目录 | 说明 | |------|------|------|------| | WYSIWYG | 所见即所得 | src/ts/wysiwyg/ | 对不熟悉 Markdown 的用户友好 | | IR | 即时渲染 | src/ts/ir/ | 类似 Typora，理论最优雅 | | SV | 分屏预览 | src/ts/sv/ | 传统模式，左右分屏 |

主入口文件

src/index.ts

Vditor 类是整个编辑器的主入口，在 init() 方法中初始化所有组件：

class Vditor {
  constructor(id: string | HTMLElement, options?: IOptions)
  
  init() {
    // 初始化各模块
    this.vditor.lute = new Lute(...)
    this.vditor.sv = new SV(this.vditor)
    this.vditor.wysiwyg = new WYSIWYG(this.vditor)
    this.vditor.ir = new IR(this.vditor)
    this.vditor.toolbar = new Toolbar(this.vditor)
    this.vditor.preview = new Preview(this.vditor)
    this.vditor.hint = new Hint(this.vditor)
    this.vditor.undo = new Undo(this.vditor)
    this.vditor.upload = new Upload(this.vditor)
  }
}

src/method.ts

静态工具方法集合，包含：

md2html(): Markdown 转 HTML
preview(): 页面 Markdown 渲染
mermaidRender(): 流程图渲染
mathRender(): 数学公式渲染
codeRender(): 代码块渲染
等等...

核心模块详解

1. WYSIWYG 模式 (`src/ts/wysiwyg/`)

| 文件 | 功能 | |------|------| | index.ts | 主类，绑定事件（复制/剪切/粘贴/拖拽等） | | input.ts | 输入处理，调用 SpinVditorDOM 渲染 | | renderDomByMd.ts | Markdown 渲染 + 图片尺寸处理 + 文档链接处理 | | afterRenderEvent.ts | 渲染后事件处理 | | keydown.ts | 键盘事件处理 | | paste.ts | 粘贴事件处理 | | cut.ts | 剪切事件处理 | | drop.ts | 拖放事件处理 |

2. IR 模式 (`src/ts/ir/`)

| 文件 | 功能 | |------|------| | index.ts | 主类，初始化 IR 编辑器 | | input.ts | 输入处理 | | keydown.ts | 键盘事件处理 | | paste.ts | 粘贴事件处理 |

3. SV 模式 (`src/ts/sv/`)

| 文件 | 功能 | |------|------| | index.ts | 主类，初始化 SV 编辑器 | | input.ts | 输入处理 | | keydown.ts | 键盘事件处理 |

4. 工具栏模块 (`src/ts/toolbar/`)

| 文件 | 功能 | |------|------| | index.ts | 主类，生成工具栏 | | MenuItem.ts | 菜单项基类 | | items/ | 各菜单项实现 |

内置 36+ 个菜单项，包括：

Bold: 粗体
Italic: 斜体
Headings: 标题
Emoji: 表情
Upload: 上传
Record: 录音
等等...

5. Markdown 模块 (`src/ts/markdown/`)

| 文件 | 功能 | |------|------| | setLute.ts | Lute 引擎配置 | | getMarkdown.ts | 获取 Markdown 内容 | | export.ts | 导出功能 |

基于 Lute 引擎，支持：

CommonMark 规范
GFM 规范
数学公式
图表
脑图
等等...

6. 工具函数模块 (`src/ts/util/`)

| 文件 | 功能 | |------|------| | Options.ts | 配置选项合并与默认值 | | selection.ts | 光标/选区操作 | | hasClosest.ts | DOM 节点查找 | | imageResize.ts | 图片拖拽调整尺寸 | | editorCommonEvent.ts | 编辑器通用事件（复制/剪切/粘贴/拖拽等） | | fixBrowserBehavior.ts | 浏览器行为修复 | | processCode.ts | 代码块渲染处理 |

渲染流程

WYSIWYG 模式渲染流程

用户输入
  ↓
input.ts (keydown/paste/cut/drop)
  ↓
getMarkdown.ts (获取当前 Markdown)
  ↓
Lute 引擎 (Markdown → HTML)
  ↓
renderDomByMd.ts (SpinVditorDOM)
  ├─ preprocessImageSize() (图片尺寸预处理)
  ├─ processImageSizeInDOM() (图片尺寸后处理)
  └─ processDocLinkInWYSIWYG() (文档链接处理)
  ↓
afterRenderEvent.ts (渲染后事件)
  ↓
undo.ts (保存撤销栈)
  ↓
cache.ts (本地缓存)

图片尺寸语法（自定义扩展）

普通语法：![alt](url) → 自动添加默认尺寸 300x200
带尺寸语法：![alt](url =300x200) → 使用指定尺寸

文档链接语法（自定义扩展）

语法：((1225096851397541888 "测试")) → 渲染为带 id 的链接

扩展功能模块

1. 预览模块 (`src/ts/preview/`)

Preview.ts: 预览类
render.ts: 渲染预览内容
theme.ts: 预览主题切换
支持内容主题：ant-design, light, dark, wechat

2. 提示补全模块 (`src/ts/hint/`)

表情自动补全
@用户自动补全
#话题自动补全
支持自定义扩展

3. 文件上传模块 (`src/ts/upload/`)

拖拽上传
粘贴上传
实时进度
CORS 跨域
支持自定义上传处理

4. 撤销重做模块 (`src/ts/undo/`)

实时保存历史栈
支持撤销
支持重做

5. 大纲模块 (`src/ts/outline/`)

目录生成
跳转导航

6. 评论模块 (`src/ts/comment/`)

仅 WYSIWYG 模式支持
高亮评论
删除评论
滚动定位

7. 调整大小模块 (`src/ts/resize/`)

编辑器高度拖拽调整

开发环境

安装依赖

npm install

启动开发服务器

npm run start

访问 http://localhost:9000

打包构建

npm run build

输出到 dist/ 目录

常用命令

npm run build: 生产构建
npm run start: 启动开发服务器
npm run test: 运行测试

核心技术栈

TypeScript
Lute (Markdown 解析引擎)
highlight.js (代码高亮)
KaTeX/MathJax (数学公式)
Mermaid (流程图)
ECharts (图表)
abcjs (五线谱)

授权

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme