Nội dung

Khung soạn thảo CKEditor

Đăng vào
0 /5
1 người đã bình chọn
Đã xem:  | Cập nhật lần cuối: 2026-11-13 14:49:05  | RSS


CKEditor & CKFinder · Viết hay, trình bày đẹp

CKEditor là nơi bạn viết; CKFinder là nơi bạn giữ ảnh & tệp tin. Hãy xem chúng như đôi bạn thân: một người cầm bút, một người giữ tư liệu.

Mục lục

  1. Tổng quan giao diện
  2. Thanh công cụ (Toolbar)
  3. Soạn thảo cơ bản
  4. Quản lý ảnh/tệp tin với CKFinder
  5. Checklist SEO & khả năng tiếp cận
  6. Phím tắt hữu ích
  7. Lỗi thường gặp

Bạn chỉ cần vài nguyên tắc: dùng Heading đúng cấp, ảnh rõ & có Alt, Remove Format khi dán từ Word; phần còn lại cứ để CKEditor lo.

Tổng quan giao diện

[Ảnh: Giao diện soạn thảo CKEditor]

Hình 1 - Không gian viết: gọn gàng, tập trung, đủ công cụ.

Phía trên là dãy nút 'thần thánh' (Toolbar), bên dưới là vùng nội dung. Bạn gõ như trong Word, hệ thống sẽ sinh HTML sạch cho web.

Thanh công cụ (Toolbar)

[Ảnh: Nhóm nút CKEditor]

Hình 2 - Nhóm nút thường gặp (ảnh minh họa, có thể khác ít nhiều tùy cấu hình).

Chế độ & tài liệu

  • Source: xem/sửa HTML thô (chỉ dùng khi hiểu HTML).
  • Undo/Redo: hoàn tác/làm lại nhanh.
  • Show Blocks: lộ khối p/h1/div để căn bố cục chuẩn.
  • Maximize: viết toàn màn hình, tập trung hơn.

Định dạng văn bản

  • B/I/U/S, H2/H2: đậm, nghiêng, gạch dưới, gạch giữa, chữ số dưới/trên.
  • Styles/Format: chọn Heading 1-3 và đoạn văn.
  • Font/Size: phông & cỡ chữ (ưu tiên Heading thay vì tăng Size).
  • Remove Format: gột sạch định dạng khi dán từ Word/Docs.

Căn lề & danh sách

  • Trái / Giữa / Phải / Canh đều.
  • Danh sách số (OL) & chấm (UL).
  • Tăng/giảm thụt lề; điều hướng văn bản LTR/RTL khi cần.

Chèn nội dung

  • Link/Unlink: tạo/xóa liên kết.
  • Image: chèn ảnh; nhớ điền Alt để tốt SEO.
  • Table: chèn bảng, nhớ bật hàng tiêu đề.
  • Emoji/Smiley (nếu cấu hình có).
Mẹo: Cấu hình mỗi site có thể khác; nếu thiếu nút cần thiết hãy báo Quản trị để bổ sung plugin hoặc sửa Toolbar.

Soạn thảo cơ bản

  1. Heading 1 là tiêu đề bài viết - hệ thống tự tạo từ PartName, mỗi bài chỉ được 1 H1. Không dùng Heading 1 trong ô soạn thảo ChiTiet (sẽ tạo H1 trùng, vi phạm chuẩn SEO).
  2. Trong nội dung bài, dùng Heading 2 cho mục lớn, Heading 3 cho mục con.
  3. Dán từ Word/Docs → dùng Remove Format rồi áp lại Heading/Style.
  4. Ảnh nên rộng ≥ 1200px, rõ nét; luôn có Alt và có thể thêm chú thích.
  5. Show Blocks để xem khối; Enter = đoạn mới, Shift+Enter = xuống dòng trong cùng đoạn.

CKFinder: kho ảnh & tệp tin

[Ảnh: CKFinder menu chuột phải]

Hình 3 - Chuột phải: Chọn, Xem, Tải về, Đổi tên, Xóa.
  1. Mở CKFinder: trong CKEditor bấm Image hoặc Link > Browse Server .
  2. Tải lên: kéo-thả file hoặc bấm Tải lên . Đặt tên không dấu, dùng gạch ngang.
  3. Chèn ảnh: nhấp đúp để chèn, hoặc chuột phải → Chọn .
  4. Sắp xếp: tạo thư mục theo năm/tháng ; hạn chế xóa ảnh đang dùng trong bài.
  5. Tối ưu: nén trước (TinyPNG...), dùng kích thước đúng nhu cầu hiển thị.
Nếu không thấy nút Browse Server, hãy báo Quản trị để kiểm tra phân quyền upload hoặc cấu hình đường dẫn.

Checklist SEO & khả năng tiếp cận

  • Chỉ 1 H1/bài; H2/H3 theo cấp nội dung.
  • Ảnh có Alt , có thể thêm caption để người đọc hiểu nhanh.
  • Liên kết ngoài: cân nhắc mở tab mới (target='_blank'); đặt title rõ nghĩa.
  • Bảng: bật hàng tiêu đề, tránh dùng bảng để dàn trang.

Phím tắt hữu ích

  • Ctrl + B - In đậm
  • Ctrl + I - Nghiêng
  • Ctrl + L/E/R/J - Căn trái/giữa/phải/đều
  • Ctrl + Z/Y - Hoàn tác/Làm lại
  • Enter - Đoạn mới; Shift+Enter - Ngắt dòng
  • Ctrl + A - Chọn tất cả
  • Ctrl + K - Tạo liên kết

Lỗi thường gặp & cách gỡ

  • Dán từ Word bị lem font/khoảng cách: dùng Remove Format , áp lại Heading/Style.
  • Ảnh mờ hoặc quá nặng: nén trước, chọn kích thước đúng; đặt chiều rộng trong hộp thoại ảnh.
  • Không thấy nút CKFinder: kiểm tra Browse Server & quyền thư mục upload.
  • Bảng tràn màn hình: đặt width:100%, dùng hàng đầu làm header.
Viết sạch - Heading chuẩn - Ảnh rõ (có Alt/Caption) - link có title: nội dung đã 'có hồn' và thân thiện SEO.