Thuộc tính HTML5 Contenteditable Chỉnh sửa nội dung web trên Front-end
Một trong những tính năng mới trong HTML5 thu hút tôi là biên tập viên bản địa. Tính năng này thường được áp dụng trong Hệ thống quản lý nội dung để chỉnh sửa nội dung trực tiếp từ trình duyệt và thường được xây dựng hoàn toàn bằng JavaScript và AJAX. HTML5 đến để làm cho quá trình dễ dàng hơn một chút bằng cách sử dụng có thể nội dung thuộc tính.
Những gì nó làm
Khi được áp dụng cho bất kỳ yếu tố nào, thuộc tính này sẽ cho phép chúng ta chỉnh sửa nội dung trong đó, hãy xem ví dụ dưới đây:
Bánh muffin croissant. Bánh quy Faworki Đan Mạch. Jujubes bột bánh quy bánh quy halvah halvah. Bánh quy gummies thạch bánh quy.
Thanh cuộn ngọt tiramisu thanh sô cô la đường caramen tootsie cuộn caramels. Bánh sô cô la kẹo bông wypas. Applicake vừng snaps cam thảo bánh ngọt croissant caramels trái cây bánh gừng bánh quy. Bánh kẹo bơ cứng Donut.
Trong ví dụ này, chúng tôi đã thêm có thể nội dung thuộc tính và thiết lập nó thật vì vậy nội dung trở nên có thể chỉnh sửa. Có hai giá trị khác có thể được thêm vào cho thuộc tính này;
saiĐiều ngược lại: nội dung sẽ không thể chỉnh sửathừa kế; nó sẽ biến nội dung có thể chỉnh sửa khi cha mẹ trực tiếp cũng có thể chỉnh sửa.
- Xem bản demo
Nếu bạn đã xem bản demo ở trên, bạn có thể thấy rằng nội dung có thể được chỉnh sửa ngay từ các trình duyệt. Tuy nhiên, cần lưu ý rằng yếu tố này không bao gồm việc lưu trữ các thay đổi chúng tôi đã thực hiện, vì vậy khi bạn làm mới trang sau khi bạn thực hiện thay đổi, nội dung sẽ hoàn nguyên.
Làm thế nào để lưu các thay đổi
Lưu thay đổi tùy thuộc vào nơi chúng tôi sẽ lưu trữ dữ liệu; thông thường, nó sẽ được lưu trong cơ sở dữ liệu. Nhưng vì chúng tôi không có quyền truy cập cơ sở dữ liệu, nên trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách lưu các thay đổi trong lưu trữ cục bộ. Để làm như vậy, chúng tôi cũng sẽ sử dụng một chút jQuery để làm cho mã đơn giản hơn. Tôi khuyên bạn nên xem Quá khứ, Hiện tại & Tương lai của Lưu trữ cục bộ cho các ứng dụng web để tham khảo thêm.
Trước hết, hãy thêm một nút bên cạnh nội dung của chúng tôi.
Thanh cuộn ngọt tiramisu thanh sô cô la đường caramen tootsie cuộn caramels. Bánh sô cô la kẹo bông wypas. Applicake vừng snaps cam thảo bánh ngọt croissant caramels trái cây bánh gừng bánh quy. Bánh kẹo bơ cứng Donut.
Ý tưởng ở đây là chúng tôi sẽ lưu trữ các thay đổi sau khi nhấp vào nút. Vì vậy, hãy thiết lập sự kiện này thông qua kịch bản;
var theContent = $ ('# content2'); $ ('# save'). on ('click', function () var editContent = theContent.html (); localStorage.newContent = editContent;); Mã này sẽ tạo một khóa mới trong localStorage chứa thay đổi cuối cùng được thực hiện trong nội dung. Chúng tôi có thể sử dụng Fireorms hoặc Công cụ dành cho nhà phát triển để làm rõ liệu dữ liệu đã được lưu trữ thành công hay chưa, nhưng hãy đảm bảo bạn nhấn nút. Đối với người dùng Firefox, hãy truy cập DOM bảng điều khiển và tìm kiếm localStorage. Trong Chrome cũng như Safari, chúng ta có thể thấy nó trong tab 'Tài nguyên'.
Sau đó chúng tôi có thể truy xuất dữ liệu này để cập nhật nội dung, như sau;
if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent')); Đoạn mã trên sẽ xác định mục Nội dung mới từ localStorage và nếu nó tồn tại, nó sẽ chuyển giá trị cho phần tử được chọn, trong trường hợp này # nội dung2. Tại thời điểm này, khi chúng tôi làm mới trang, chúng tôi vẫn sẽ thấy sự thay đổi chúng tôi đã thực hiện.
- Xem bản demo
- Tải xuống nguồn
Suy nghĩ cuối cùng
Vào thời xưa, việc thêm tính năng biên tập mặt trước như chúng tôi đã trình bày, có thể mất hàng giờ hoặc thậm chí vài tuần. Hôm nay, chỉ mất một giây với thuộc tính này, có thể nội dung.
Và, theo caniuse.com, thuộc tính này đã được hỗ trợ, (đáng ngạc nhiên) trong IE7 + và (không ngạc nhiên) trong các trình duyệt khác như sau: Firefox 12, Chrome 20, Safari 5.1 và Opera 12. Điều đó có nghĩa là chúng ta có thể sử dụng yếu tố này một cách hòa bình của tâm trí mà không phải thiết lập fallbacsk cho các trình duyệt cũ hơn.
