HTML Builder (Hồ sơ năng lực động)

Đường vào: Dashboard → Mở Hồ sơ năng lực
URL: /admin/html-slides-editor/:id

HTML Builder là khu vực thiết kế hồ sơ năng lực dạng slide (Canva-style), tách biệt với PDF upload ở mục Thông tin công ty.

Khi nào dùng HTML Builder?

• Cần chỉnh layout nhanh theo từng slide
• Cần export HTML / PDF trực tiếp từ editor
• Cần import block nội dung tái sử dụng

Nếu chỉ thay file hồ sơ cuối cùng cho website /profile thì đi theo luồng Upload PDF: Hồ sơ năng lực PDF

Các nút quan trọng trên topbar

• Save: lưu lên API (và autosave 3s khi đã có document id)
• Export → HTML: tải HTML
• Export → PDF (tất cả slides): xuất toàn bộ slide thành 1 file PDF
• Preview: mở tab xem nhanh
• Code: sửa code slide đang mở
• Import: chèn block HTML

Cơ chế autosave & cache (rất quan trọng)

Editor lưu theo 2 lớp:

1. localStorage (nhanh, mỗi ~0.5s)
   Key: html-slides-editor-v2
2. API remote (ổn định, mỗi ~3s nếu có document id)

Cách reset cache editor khi dữ liệu “lệch”

1. Bấm Save trước khi làm gì.
2. Mở DevTools (F12) → Application → Local Storage.
3. Xoá key html-slides-editor-v2.
4. Hard refresh (Ctrl/Cmd + Shift + R).
5. Mở lại URL editor có /:id để tải chuẩn từ API.

Lỗi “Export PDF không ra” — xử lý nhanh

1. Chờ ảnh load xong hoàn toàn (đặc biệt slide có nhiều ảnh lớn).
2. Bấm Save rồi thử export lại.
3. Nếu vẫn lỗi:
   • Hard refresh editor
   • Kiểm tra ảnh trong slide còn tồn tại trên Media không
   • Thay ảnh ngoài domain bằng ảnh upload qua Media Song Ngọc
4. Thử giảm kích thước ảnh quá nặng (>5MB) rồi export lại.

Nguyên nhân kỹ thuật thường gặp

• Ảnh chặn CORS / ảnh lỗi làm html2canvas không render được
• Cache trình duyệt giữ bản ảnh cũ
• Slide quá nặng gây timeout render

Quy trình chuẩn cho end-user

Xem chi tiết: Quy trình xuất PDF từ HTML Builder