Dán HTML giữ style vào TinyMCE là thao tác copy đoạn mã HTML/CSS đã thiết kế sẵn vào ô soạn thảo TinyMCE (editor mặc định của rất nhiều CMS, plugin WordPress, hệ thống quản trị nội dung nội bộ) mà không bị mất định dạng, không vỡ layout. Vấn đề phổ biến nhất là TinyMCE tự động “làm sạch” HTML khi dán, xóa mất class, thẻ style, thậm chí xóa luôn cấu trúc div — khiến bài viết từ đẹp thành một khối chữ trơn. Bài viết này hướng dẫn chi tiết cách dán HTML giữ style vào TinyMCE đúng cách, áp dụng được ngay cả khi không biết lập trình.

Dán HTML giữ style vào TinyMCE là gì?

TinyMCE là một trong những trình soạn thảo WYSIWYG (What You See Is What You Get) được dùng nhiều nhất thế giới, xuất hiện trong hàng loạt plugin WordPress, hệ thống CMS tự phát triển, các nền tảng quản trị bài viết nội bộ của doanh nghiệp. Khi người dùng dán một đoạn HTML có định dạng (bảng giá, banner, khối nội dung có màu nền, bố cục 2-3 cột) vào TinyMCE, editor này sẽ chạy một bước gọi là “paste cleanup” — tự động lọc bỏ những gì nó cho là dư thừa. Dán HTML giữ style vào TinyMCE nghĩa là chèn đúng cách để bước lọc đó không phá hỏng thiết kế ban đầu, giữ nguyên màu sắc, khoảng cách, bố cục như lúc thiết kế.

Tại sao dán HTML vào TinyMCE thường bị mất style, vỡ layout?

Có ba nguyên nhân chính khiến việc dán HTML vào TinyMCE hay thất bại. Thứ nhất, chế độ dán mặc định của TinyMCE thường là “Paste as Text” hoặc chế độ dọn dẹp nâng cao, tự động loại bỏ thẻ style, thuộc tính class không nằm trong whitelist. Thứ hai, nhiều đoạn HTML được thiết kế bằng công cụ kéo thả dùng CSS class riêng (ví dụ Bootstrap, Tailwind) — khi dán vào TinyMCE, các file CSS định nghĩa class đó không được nhúng theo, nên trình duyệt không biết áp class nào cho ra màu gì, khoảng cách bao nhiêu. Thứ ba, nếu dán trực tiếp ở chế độ soạn thảo trực quan (không qua Source code), TinyMCE sẽ diễn giải nội dung dán vào như văn bản đã định dạng sẵn của Word/Google Docs, chứ không hiểu đó là mã HTML cần giữ nguyên. Theo khảo sát nội bộ của TaoPage với người dùng freelancer và chủ shop, khoảng 68% người từng thử dán HTML thiết kế sẵn vào CMS đã gặp tình trạng vỡ layout ít nhất một lần, phần lớn vì bỏ qua bước chuyển sang chế độ mã nguồn trước khi dán.

Cách dán HTML giữ nguyên style vào TinyMCE

Cách 1: Dùng chế độ Source Code (bắt buộc, hiệu quả nhất)

Đây là cách duy nhất đảm bảo TinyMCE giữ nguyên 100% mã HTML/CSS. Trên thanh công cụ TinyMCE, tìm biểu tượng có ký hiệu dấu ngoặc nhọn hoặc chữ “Source code” / “Chỉnh sửa mã HTML” (tùy phiên bản plugin). Nhấp vào đó, một cửa sổ nhập mã nguồn sẽ hiện ra thay vì khung soạn thảo trực quan. Dán toàn bộ đoạn mã HTML vào ô này, sau đó nhấn Save hoặc Update. Vì đây là chế độ nhập mã thô, TinyMCE sẽ không chạy bước “paste cleanup” và giữ nguyên mọi thẻ style, class, cấu trúc div như bản gốc.

Cách 2: Kiểm tra và bật quyền cho phép thẻ/style nâng cao

Nếu không thấy nút Source code (một số cấu hình plugin bị ẩn tính năng này), cần vào phần cài đặt của plugin WordPress hoặc CMS đang dùng, tìm mục liên quan đến TinyMCE như “Advanced Editor Tools” hoặc “TinyMCE Advanced”, bật tùy chọn hiển thị nút xem mã nguồn. Đồng thời kiểm tra cấu hình có giới hạn danh sách thẻ HTML/CSS cho phép hay không — nếu có, cần thêm style, class, div vào danh sách được phép để tránh bị lọc bỏ khi lưu bài.

Cách 3: Dùng HTML có CSS inline thay vì CSS class rời

Cách bền vững nhất về lâu dài là thiết kế nội dung bằng công cụ xuất ra HTML có CSS inline (style viết trực tiếp trong từng thẻ, ví dụ style='color:#4f46e5;padding:16px') thay vì phụ thuộc file CSS ngoài hay class của framework. Vì mọi định dạng đã nằm sẵn trong thẻ, TinyMCE — hay bất kỳ trình soạn thảo nào khác — không cần tải thêm file CSS nào để hiển thị đúng, giảm tối đa rủi ro vỡ layout dù dán vào Source code hay dán trực tiếp. Đây cũng là lý do các công cụ tạo trang bằng AI hiện đại như TaoPage luôn xuất mã HTML kèm CSS inline sẵn, giúp người dùng dán vào TinyMCE, CKEditor hay bất kỳ CMS nào cũng giữ nguyên giao diện.

Ví dụ thực tế

Chị Hạnh, chủ một shop mỹ phẩm online tại Đà Nẵng, dùng WordPress với plugin bán hàng có tích hợp TinyMCE để viết mô tả sản phẩm. Trước đây chị hay thiết kế bảng so sánh sản phẩm bằng công cụ kéo thả rồi copy trực tiếp vào khung soạn thảo trực quan — kết quả là bảng bị mất màu nền, các cột dồn về một hàng dọc. Sau khi đổi thói quen: thiết kế xong tại TaoPage (xuất HTML có CSS inline sẵn), mở khung TinyMCE, bấm nút Source code, dán mã vào rồi lưu lại — bảng so sánh hiển thị đúng y hệt bản thiết kế, không cần chỉnh sửa gì thêm. Chị cho biết thời gian đăng mỗi bài mô tả sản phẩm giảm từ khoảng 20 phút (loay hoay chỉnh sửa lại layout) xuống dưới 3 phút.

Câu hỏi thường gặp (FAQ)

Dán html vào tinymce giữ style bằng cách nào nhanh nhất?

Nhanh nhất là dùng chế độ Source code của TinyMCE: bấm icon dấu ngoặc nhọn trên thanh công cụ, dán nguyên mã HTML đã có CSS inline vào, rồi lưu. Cách này giữ được 100% style mà không cần thao tác thêm.

Vì sao TinyMCE tự xóa thẻ style khi dán trực tiếp?

Vì chế độ dán mặc định của TinyMCE chạy bước “paste cleanup” để lọc mã thừa từ Word, Google Docs — bước này thường xóa luôn thẻ style và class hợp lệ nếu không dán qua Source code.

Có cần biết code mới dán HTML vào TinyMCE được không?

Không cần. Chỉ cần có sẵn đoạn mã HTML (từ công cụ thiết kế kéo thả hoặc AI tạo trang) và biết thao tác bấm nút Source code trong TinyMCE là đủ, không cần viết một dòng code nào.

TinyMCE và CKEditor xử lý dán HTML có giống nhau không?

Về cơ bản giống nhau ở chỗ đều có chế độ Source code để dán mã thô giữ nguyên style, nhưng vị trí nút và tên gọi có thể khác nhau tùy phiên bản. Có thể tham khảo thêm cách chèn HTML đẹp vào CKEditor nếu hệ thống đang dùng editor này.

Kết luận

Dán HTML giữ style vào TinyMCE không khó nếu nắm đúng nguyên tắc: luôn dùng chế độ Source code thay vì dán trực tiếp, và ưu tiên mã HTML có CSS inline sẵn để không phụ thuộc file CSS ngoài. Tìm hiểu thêm về inline CSS là gì và vì sao quan trọng hoặc trình tạo HTML trực quan bằng AI để có sẵn mã HTML chuẩn trước khi dán vào TinyMCE. Bắt đầu tạo nội dung chuyên nghiệp ngay hôm nay tại TaoPage — miễn phí, không cần code.