Editor kéo thả là gì?

Sau khi AI tạo block nội dung, bạn có thể chỉnh sửa trực tiếp trên canvas mà không cần chạm vào một dòng code nào. Editor sử dụng GrapesJS — một trong những visual editor mạnh nhất hiện nay — được tối ưu hóa riêng cho AITaoPage với giao diện tiếng Việt đơn giản.

Giao diện tổng quan của editor AITaoPage
Giao diện editor: thanh prompt trên cùng, canvas ở giữa, sidebar lịch sử bên phải

Chỉnh sửa text — Double-click để sửa trực tiếp

Tính năng hay nhất và dùng nhiều nhất: double-click vào bất kỳ đoạn text nào để chỉnh sửa ngay tại chỗ (inline editing). Không cần popup, không cần sidebar — cứ như đang gõ vào Word.

Ví dụ thực tế:

  1. AI tạo ra headline "Da sáng mịn sau 14 ngày" — nhưng sản phẩm của bạn cho kết quả sau 7 ngày
  2. Double-click vào dòng headline
  3. Xóa "14 ngày" và gõ "7 ngày"
  4. Click ra ngoài để xác nhận — xong

Mọi text trên canvas đều có thể sửa theo cách này: headline, subheadline, đoạn văn, text trên nút CTA, v.v.

Double-click để chỉnh sửa text trực tiếp trên canvas
Double-click vào text để vào chế độ sửa trực tiếp — con trỏ nhấp nháy như trong Word

Kéo thả các khối nội dung

Để di chuyển một section hoặc element, click và giữ rồi kéo đến vị trí mới. Đường guide màu xanh xuất hiện để chỉ vị trí drop. Thả ra để element đến vị trí mới.

Ứng dụng thực tế: AI tạo ra section "Testimonial" nằm trên section "Bảng giá" — bạn muốn đổi thứ tự — chỉ cần kéo section Bảng giá lên trên.

Undo / Redo — Ctrl+Z và Ctrl+Y

Mọi thao tác chỉnh sửa đều có thể hoàn tác:

  • Ctrl+Z (Windows) / Cmd+Z (Mac): Undo — quay lại bước trước
  • Ctrl+Y (Windows) / Cmd+Y (Mac): Redo — làm lại bước vừa undo

Ngoài ra, toolbar phía trên có nút mũi tên trái (Undo) và mũi tên phải (Redo) — click vào nếu bạn không quen phím tắt.

Chuyển đổi Desktop / Mobile Preview

Trước khi sao chép HTML, hãy kiểm tra giao diện trên điện thoại. Click nút Desktop hoặc Mobile ở thanh toolbar để xem canvas co lại như màn hình điện thoại.

Tại sao quan trọng: Hơn 60% người dùng Việt Nam xem web trên điện thoại. Block đẹp trên desktop nhưng vỡ layout trên mobile = mất khách hàng. AI đã tạo ra nội dung responsive, nhưng kiểm tra trực quan giúp bạn yên tâm hơn trước khi dán vào CMS.

Chế độ preview mobile trong editor
Canvas co lại theo kích thước điện thoại — kiểm tra bố cục mobile trước khi sao chép HTML

Chọn và xóa element

Click một lần vào element để chọn (viền xanh xuất hiện). Sau khi chọn:

  • Nhấn Delete / Backspace để xóa element đó
  • Nhìn thanh trạng thái phía dưới element để biết đang chọn element nào (div, section, button...)

Lưu ý: Nếu xóa nhầm, nhấn Ctrl+Z ngay để hoàn tác.

Giới hạn cần biết

  • Editor chỉ hỗ trợ chỉnh sửa text và vị trí — không hỗ trợ thêm block mới hay thay đổi màu sắc trong phiên bản hiện tại
  • Nếu cần thay đổi màu sắc hoặc layout lớn, cách hiệu quả nhất là tạo lại với prompt mới mô tả rõ màu sắc mong muốn
  • Thay đổi sẽ được lưu tự động khi bạn tạo block mới — không có nút "Save" riêng

Kết luận

Ba thao tác cần nhớ: double-click để sửa text, click và kéo để di chuyển, Ctrl+Z để undo. Với ba thao tác này, bạn có thể tinh chỉnh mọi block AI tạo ra cho phù hợp với sản phẩm và thương hiệu của mình — tất cả trong vài phút, không cần một dòng code nào.