Bật chế độ chỉnh sửa (edit mode) cho toàn bộ tài liệu HTML trong trình duyệt

Trong JavaScript, document.designMode = “on” được sử dụng để bật chế độ chỉnh sửa (edit mode) cho toàn bộ tài liệu HTML trong trình duyệt. Khi được kích hoạt, nó cho phép người dùng chỉnh sửa trực tiếp nội dung của trang web ngay trên giao diện, giống như một trình soạn thảo văn bản.

Công dụng cụ thể:

Cho phép chỉnh sửa nội dung trang web:

• Khi document.designMode = “on”, người dùng có thể nhấp vào bất kỳ phần tử nào trên trang (như văn bản, tiêu đề, đoạn văn) và chỉnh sửa nội dung trực tiếp.
• Các thay đổi này chỉ tồn tại tạm thời trong trình duyệt và không được lưu về phía server trừ khi có xử lý thêm.

Ứng dụng trong trình soạn thảo WYSIWYG:

• Được sử dụng trong các trình soạn thảo web như CKEditor, TinyMCE, hoặc các công cụ chỉnh sửa nội dung trực quan.
• Ví dụ: Các nền tảng blog hoặc CMS có thể dùng để cho phép người dùng chỉnh sửa bài viết trực tiếp trên giao diện.

Kiểm tra và gỡ lỗi giao diện:

• Nhà phát triển có thể sử dụng để kiểm tra giao diện hoặc nội dung trang web bằng cách chỉnh sửa trực tiếp trong trình duyệt.

Cách sử dụng:

• Để bật chế độ chỉnh sửa:

document.designMode = "on";

• Để tắt chế độ chỉnh sửa:

document.designMode = "off";

Lưu ý:

• Phạm vi ảnh hưởng: designMode áp dụng cho toàn bộ tài liệu (document). Nếu bạn chỉ muốn một phần tử cụ thể có thể chỉnh sửa, hãy sử dụng thuộc tính contentEditable = true trên phần tử đó.
• Hỗ trợ trình duyệt: Hầu hết các trình duyệt hiện đại (Chrome, Firefox, Safari) đều hỗ trợ designMode.
• Tính tạm thời: Các thay đổi trong chế độ này không được lưu trữ trừ khi bạn viết thêm mã để lưu nội dung (ví dụ: gửi về server qua AJAX).

Ví dụ:

// Bật chế độ chỉnh sửa
document.designMode = "on";
// Tắt sau 10 giây
setTimeout(() => {
document.designMode = "off";
}, 10000);

Lưu nội dung HTML vào một file trên client-side

Bạn có thể lấy nội dung HTML của trang và cho phép người dùng tải xuống dưới dạng file .html.

// Bật chế độ chỉnh sửa
document.designMode = "on";
// Hàm lưu nội dung HTML
function saveHTML() {
// Lấy nội dung HTML của toàn bộ trang
const htmlContent = document.documentElement.outerHTML;
// Tạo một Blob chứa nội dung HTML
const blob = new Blob([htmlContent], { type: 'text/html' });
// Tạo URL tạm thời để tải file
const url = window.URL.createObjectURL(blob);
// Tạo một thẻ  để tải file
const a = document.createElement('a');
a.href = url;
a.download = 'edited_page.html'; // Tên file khi tải xuống
document.body.appendChild(a);
a.click();
document.body.removeChild(a); // Xóa thẻ  sau khi tải
window.URL.revokeObjectURL(url); // Giải phóng URL
}
// Gọi hàm saveHTML() khi cần, ví dụ, gắn vào một nút:
document.getElementById('saveButton').addEventListener('click', saveHTML);

Cách dùng:

• Thêm một nút <button id=”saveButton”>Lưu HTML</button> vào trang.
• Khi nhấn nút, trình duyệt sẽ tải xuống file edited_page.html chứa nội dung đã chỉnh sửa.