Hướng dẫn sử dụng các công cụ chỉnh sửa nội dung: Text, TinyMCE và GrapesJS

Text Editor (Trình soạn thảo văn bản đơn giản)

• Khi bạn chỉ cần nhập nội dung nhanh, đơn giản như đoạn giới thiệu, mô tả sản phẩm, hoặc văn bản thường.

📍 Cách sử dụng:

• Truy cập vào một trang bất kỳ đã tạo (VD: Trang chủ, Giới thiệu…).
• Mở phần chỉnh sửa nội dung, chọn Text làm kiểu dữ liệu.
• Nhập nội dung vào khung text có sẵn.
• Có thể sử dụng một vài định dạng đơn giản như:
• Xuống dòng (Enter)
• In đậm/in nghiêng bằng cách dùng markdown (nếu hỗ trợ)
• Nhấn Lưu để cập nhật nội dung.

📎 Text Editor phù hợp để ghi chú nhanh hoặc hiện nội dung đơn giản – không cần cấu trúc hay định dạng phức tạp.

TinyMCE (Trình soạn thảo văn bản nâng cao)

• Khi bạn cần định dạng văn bản nhiều hơn: chèn ảnh, tạo bảng, liên kết, chỉnh font, màu chữ,…

📍 Cách sử dụng:

• Chọn phần nội dung bạn muốn chỉnh sửa.
• Đặt kiểu dữ liệu là TinyMCE.
• Giao diện TinyMCE sẽ hiển thị như trình soạn thảo Word:
• Dòng công cụ trên cùng với các nút như:
• B (in đậm), I (in nghiêng), 🖇 (thêm liên kết), 🖼 (thêm ảnh), 📋 (bullet list), 📊 (bảng),…
• Soạn nội dung hoặc dán từ Word, rồi chỉnh sửa như ý.
• Nhấn Lưu để hoàn tất.

💡 TinyMCE rất phù hợp để viết bài blog, giới thiệu sản phẩm, hoặc nội dung cần trình bày đẹp.

GrapesJS (Trình chỉnh sửa giao diện kéo-thả)

• Khi bạn muốn tùy chỉnh bố cục và thiết kế trực quan hơn bằng cách kéo-thả, thay vì viết mã.

📍 Cách sử dụng:

• Truy cập trang cần chỉnh sửa.
• Nhấn vào nút “Chỉnh sửa bằng GrapesJS”.
• Giao diện GrapesJS sẽ hiện ra:
• Cột bên trái là các thành phần như: Text, Image, Video, Column, Button,...
• Giữa màn hình là khu vực hiển thị trang web.

Bạn có thể:

• Kéo thành phần từ bên trái → Thả vào chỗ bạn muốn trên trang.
• Click vào từng khối để chỉnh nội dung, ví dụ: sửa chữ, đổi hình ảnh, gắn liên kết, căn lề,...
• Kéo khối lên xuống để sắp xếp lại bố cục.
• Nhấn Lưu & Thoát, rồi xuất bản.

🛠 GrapesJS dành cho người không biết code nhưng muốn tự tay “dựng” giao diện đẹp mắt, chuyên nghiệp.