Cài đặt và sử dụng

Kích hoạt plugin

Vào Settings → Plugin Manager, bật @digiforce-nc/plugin-field-markdown-vditor. Plugin cần file storage đã cấu hình nếu muốn hỗ trợ upload ảnh trong editor.

Thêm field Markdown

1. Mở Collection Manager → chọn collection.
2. Thêm field mới → chọn interface Markdown (Vditor).
3. Đặt tên field (ví dụ: content, description, notes).
4. Lưu — field hiển thị Vditor editor trên form.

const contentField = {
  name: 'content',
  type: 'text',
  interface: 'markdownVditor',
  uiSchema: {
    type: 'string',
    title: 'Nội dung',
    'x-component': 'Vditor',
    'x-component-props': {
      mode: 'wysiwyg',
      minHeight: 300,
    },
  },
};

Soạn thảo WYSIWYG

Vditor hỗ trợ 3 chế độ soạn thảo:

Chế độ	Mô tả	Phù hợp cho
WYSIWYG	Soạn trực quan — format ngay khi gõ	Người dùng phổ thông
Instant Rendering	Markdown syntax + preview real-time	Người quen Markdown
Split View	Code bên trái, preview bên phải	Kiểm tra syntax

Chuyển chế độ bằng toolbar trong editor.

Định dạng hỗ trợ

• Văn bản: heading, bold, italic, strikethrough, highlight
• Danh sách: ordered, unordered, checklist
• Bảng: tạo và chỉnh sửa bảng trực tiếp
• Code: inline code, code block với syntax highlighting
• Công thức toán: KaTeX ($E = mc^2$)
• Sơ đồ: Mermaid (flowchart, sequence diagram...)
• Biểu đồ: ECharts (bar, line, pie...)
• Link và media: URL, embed video

Upload hình ảnh

Khi chèn ảnh vào editor:

1. Kéo thả ảnh hoặc click nút upload trên toolbar.
2. Editor gọi server để kiểm tra storage (vditor:check).
3. Nếu storage khả dụng → upload ảnh → nhận URL → chèn vào markdown.
4. Nếu storage chưa cấu hình → chỉ cho nhập URL ảnh thủ công.

Cấu hình storage cho upload

Đảm bảo hệ thống đã cấu hình file storage (S3, local...) qua plugin-file-manager. Server action vditor:check kiểm tra:

• Storage tồn tại và đang hoạt động.
• Có quyền ghi file.
• Trả về config (base URL, size limit...).

Hiển thị nội dung (read-only)

Khi xem bản ghi ở chế độ read-only:

• Markdown được render thành HTML với đầy đủ format.
• Công thức KaTeX, sơ đồ Mermaid, biểu đồ ECharts hiển thị đúng.
• Hình ảnh hiển thị từ URL đã upload.

Lưu ý

• Nội dung lưu dạng Markdown text trong database (cột TEXT) — không lưu HTML.
• Assets Vditor (CSS, JS, fonts) được copy vào dist khi install, không phụ thuộc CDN ngoài.
• Editor được lazy-loaded — bundle chỉ tải khi mở field, không ảnh hưởng trang khác.
• Upload ảnh cần storage đã cấu hình; không có storage vẫn soạn text bình thường.