04 — Inline Editor: sửa trực tiếp trên trang
04 — Inline Editor: sửa trực tiếp trên trang
Inline Editor là công cụ cho phép bạn sửa tiêu đề, đoạn văn, ảnh, link… ngay trên trang web, không cần vào Desk mở form. Đây là cách nhanh nhất để cập nhật nội dung của Home, About, Blog, Contact và mọi trang Mantis Web Page.
1. Ai được dùng Inline Editor?
Tự động bật cho các role:
- Website Manager 🛡️
- Content Editor
- System Manager
Khách truy cập thông thường (Guest / người chưa đăng nhập) không thấy thanh công cụ editor.
2. Kích hoạt
- Đăng nhập Desk như bình thường (xem 02).
- Mở tab mới và truy cập trang site cần sửa (ví dụ
/about). - Ở góc trang sẽ hiện thanh công cụ nổi (floating toolbar) với trạng thái "Sẵn sàng".
- Bấm nút “Bật chỉnh sửa” — trạng thái chuyển sang "Đang chỉnh sửa" và mọi vùng có thể sửa sẽ được đánh dấu bằng viền mờ.
Mẹo: nếu không thấy toolbar, hãy
Ctrl + F5để xoá cache trình duyệt, và kiểm tra lại bạn đã đăng nhập đúng tài khoản có role biên tập.
3. Các thao tác
3.1. Sửa văn bản
- Click vào tiêu đề, đoạn mô tả, nhãn nút… (những phần có viền sáng khi hover).
- Gõ trực tiếp để sửa.
- Blur (click ra ngoài) hoặc bấm
Esc— hệ thống tự động lưu (có thông báo “Đã lưu” trên toolbar). - Nếu lưu lỗi, toolbar sẽ hiện "Lưu thất bại: ..." — kiểm tra kết nối và thử lại.
3.2. Sửa văn bản giàu định dạng (Rich Text)
Một số khối (ví dụ image_text, mission_vision, blog_posts_filterable) có
trường rich text. Khi bạn click vào, một thanh công cụ mini hiện lên cho phép:
- Bold / Italic / Underline
- Danh sách (bullet / số thứ tự)
- Link
- Heading (H2/H3)
Click ra ngoài để tự lưu.
3.3. Thay ảnh
- Click vào ảnh cần đổi.
- Hộp thoại upload mở ra → chọn file (định dạng JPG/PNG/WebP/SVG, tối đa 10 MB).
- Hệ thống tự upload, chèn ảnh mới và lưu.
- Ảnh đã upload được lưu tại File Manager (
/app/file).
Xem 11 — Upload & tối ưu ảnh để biết kích thước và định dạng khuyến nghị.
3.4. Sửa link
- Click vào nút CTA hoặc text liên kết.
- Overlay nhỏ hiện ra với ô URL — điền đường dẫn (ví dụ
/request-demohoặchttps://calendly.com/...) và bấm Save.
4. Thanh công cụ (toolbar) có gì
| Nút | Chức năng |
|---|---|
| Bật/Tắt chỉnh sửa | Chuyển chế độ edit. Tắt khi đã xong để tránh sửa nhầm. |
| Trạng thái | "Sẵn sàng" / "Đang lưu..." / "Đã lưu" / "Lỗi". |
| Quản lý trang 🛡️ | (Website Manager) Tạo Mantis Web Page mới, đổi trạng thái Published, xoá trang. |
| Ngôn ngữ | Nếu site hỗ trợ đa ngôn ngữ: chuyển VI/EN để sửa nội dung của từng bản ngôn ngữ. |
5. Các vùng KHÔNG sửa được bằng Inline Editor
Inline editor chỉ sửa được các trường được đánh dấu mt-editable. Một số phần
phải vào Desk để sửa:
- Navbar, Footer → Desk → Website Settings.
- Danh sách sản phẩm / bài blog (các block
products_filterable,blog_posts_filterable) — dữ liệu đến từ DocType nguồn. Muốn sửa tên/ảnh một sản phẩm, bạn phải mở Mantis Product; muốn sửa bài blog phải mở Blog Post. - Cấu trúc trang (thêm/xoá khối, đổi thứ tự) → Desk → Mantis Web Page (xem 03).
- Meta SEO (title/description/OG image) → Desk → Mantis Web Page → tab SEO & Social.
6. Thực hành tốt
- Luôn xem trước ở chế độ Guest: sau khi sửa, mở tab ẩn danh và truy cập trang để chắc chắn visitor thấy đúng nội dung.
- Không Ctrl+F5 giữa chừng khi editor đang hiện “Đang lưu...” — chờ thấy “Đã lưu” rồi mới reload.
- Tắt chế độ edit khi không dùng — tránh vô tình sửa khi lướt trang.
- Không dán nội dung từ Word trực tiếp (hay kèm theo style ẩn làm vỡ layout). Dán vào Notepad/TextEdit trước rồi mới copy sang editor.
- Khôi phục: Inline editor không có Undo toàn cục. Nếu cần khôi phục nội dung cũ, vào Desk → mở Mantis Web Page → tab Activity / Versions để xem lịch sử và copy lại.
7. Nếu nội dung không cập nhật trên site
Thứ tự kiểm tra:
- Đã thấy thông báo "Đã lưu" trên toolbar chưa?
- Mở tab ẩn danh và truy cập trang — đã đúng chưa?
- Nếu vẫn cũ, xem 12 — Troubleshooting.