Tham chiếu kỹ thuật

vditor:check Resource — Validate Storage

Server đăng ký resource vditor với action check:

Action	Method	Mô tả
`vditor:check`	GET	Kiểm tra file storage đã cấu hình và sẵn sàng cho upload ảnh

Response

typescript

// Storage sẵn sàng
{ data: true }

// Storage chưa cấu hình
{ data: false }

Client dùng kết quả này để bật/tắt nút upload ảnh trong toolbar Vditor.

CDN Loading — Vditor Dependencies

Plugin sử dụng các thư viện nâng cao được lazy-loaded qua CDN hoặc local assets:

Library	Chức năng	Cách tải
Vditor	Core editor engine	Bundle chính, lazy-loaded khi mở field
KaTeX	Render công thức toán học	Lazy-load khi phát hiện syntax $...$
Mermaid	Render sơ đồ (flowchart, sequence...)	Lazy-load khi phát hiện code block `mermaid`
ECharts	Render biểu đồ tương tác	Lazy-load khi phát hiện code block `echarts`
Flowchart.js	Render lưu đồ	Lazy-load khi phát hiện code block `flowchart`

Local assets vs CDN

Khi install plugin, server copy thư mục assets Vditor vào dist:

node_modules/vditor/dist/ → public/vditor/

Điều này đảm bảo:

Editor hoạt động trong mạng nội bộ (không cần internet).
Tốc độ tải nhanh hơn CDN bên ngoài.
Version consistent với phiên bản plugin.

Text Storage trong Database

Thuộc tính	Giá trị
Column type	`TEXT`
Format lưu trữ	Markdown plaintext
Encoding	UTF-8

Markdown text không bị transform khi lưu — ghi nguyên nội dung người dùng soạn. Rendering (Markdown → HTML) chỉ xảy ra ở client khi hiển thị.

Ví dụ giá trị trong database

markdown

# Tiêu đề bài viết

Đoạn văn bản thường.

![Ảnh minh họa](https://storage.example.com/uploads/image.png)

$$E = mc^2$$

```mermaid
flowchart LR
    A --> B --> C
```

Upload ảnh — Luồng chi tiết

User kéo ảnh vào editor
  → Vditor gọi upload handler
  → Handler gọi vditor:check → xác nhận storage OK
  → Handler POST file tới file storage API
  → Storage trả về URL công khai
  → URL được chèn vào markdown: ![alt](url)
  → Lưu bản ghi → markdown text (kèm URL ảnh) vào DB

Ảnh không lưu trong database — chỉ lưu URL tham chiếu. File thực tế nằm trên storage (S3, local...).

Asset Distribution — Server install

Khi plugin install hoặc hệ thống build:

server.afterLoad()
  → Tìm thư mục vditor trong node_modules
  → Copy dist/ (CSS, JS, fonts, themes) vào public assets
  → Client trỏ CDN path về local assets

Quá trình này chạy một lần khi deploy, không ảnh hưởng runtime.