HTML5 Atrybut Contenteditable Edycja treści WWW na froncie
Jedna z nowych funkcji w HTML5 przyciąga mnie natywny edytor frontonu. Ta funkcja jest powszechnie stosowana w systemach zarządzania treścią do edycji treści bezpośrednio z przeglądarki i zazwyczaj jest w pełni zbudowana z JavaScript i AJAX. HTML5 ułatwia nieco proces zadowalający atrybut.
Co to robi
Po zastosowaniu do dowolnego elementu ten atrybut pozwoli nam edytować zawartość w nim, zobaczmy poniższy przykład:
Rogalik z ciasteczkami. Faworki duńskie ciastko. Jujubes ciastko w proszku ciastko chałwa chałwa. Biszkoptowe galaretki biszkoptowe.
Batoniki tiramisu ze słodkiej bułki Karmelki ze śliwki cukrowej Karmelki tootsie roll. Ciasto czekoladowe wypada oblodzenie waty cukrowej. Zastosuj sezamowe zatrzaski lukrecji ciasta rogaliki karmelowe ciastko z piernika. Laski cukierków toffi.
W tym przykładzie dodaliśmy zadowalający atrybut i ustaw go prawdziwe więc treść staje się edytowalna. Istnieją dwie inne wartości, które można dodać dla tego atrybutu;
fałszywyco robi odwrotnie: treść nie będzie edytowalnadziedziczyć; zmieni zawartość edytowalną, gdy bezpośredni rodzic jest również edytowalny.
- Wyświetl demo
Jeśli wyewidencjonowałeś demo powyżej, możesz zobaczyć, że zawartość można edytować bezpośrednio z przeglądarek. Należy jednak zauważyć, że ten element nie obejmuje przechowywania zmian, które wprowadziliśmy, więc po odświeżeniu strony po dokonaniu zmiany zawartość zostanie przywrócona.
Jak zapisać zmiany
Zapisywanie zmian zależy od tego, gdzie będziemy przechowywać dane; zwykle zostanie zapisany w bazie danych. Ale ponieważ nie mamy dostępu do bazy danych, w tym samouczku pokażemy, jak zapisać zmiany w Lokalny magazyn. Aby to zrobić, użyjemy również trochę jQuery, aby uprościć kod. Zalecam przyjrzenie się przeszłości, teraźniejszości i przyszłości lokalnej pamięci masowej dla aplikacji internetowych jako dalsze odniesienie.
Przede wszystkim dodajmy przycisk obok naszej zawartości.
Batoniki tiramisu ze słodkiej bułki Karmelki ze śliwki cukrowej Karmelki tootsie roll. Ciasto czekoladowe wypieka puder z waty cukrowej. Zastosuj sezamowe zatrzaski lukrecji ciasta rogaliki karmelowe ciastko z piernika. Laski cukierków toffi.
Chodzi o to, że będziemy przechowywać zmiany po kliknięciu przycisku. Więc ustawmy to wydarzenie za pomocą skryptu;
var theContent = $ ('# content2'); $ ('# save'). on ('click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;); Ten kod utworzy nowy klucz w localStorage zawierający ostatnią zmianę w treści. Możemy użyć Firebug lub Developer Tools, aby wyjaśnić, czy dane zostały pomyślnie zapisane, czy nie, ale upewnij się, że nacisnąłeś przycisk. Dla użytkowników Firefoksa przejdź do DOM panel i wyszukaj localStorage. W Chrome i Safari widzimy go w zakładce „Zasoby”.
Następnie możemy pobrać te dane, aby zaktualizować zawartość w następujący sposób;
if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent')); Powyższy kod zidentyfikuje przedmiot Nowa treść z localStorage i jeśli istnieje, przekaże wartość do wybranego elementu, w tym przypadku # content2. W tym momencie, kiedy odświeżamy stronę, nadal powinniśmy zobaczyć wprowadzoną zmianę.
- Wyświetl demo
- Pobierz źródło
Końcowa myśl
Dawniej dodawanie funkcji edytora frontonu, jak pokazaliśmy, może zająć godziny, a nawet tygodnie. Dzisiaj ten atrybut zajmuje tylko sekundę, zadowalający.
I, według caniuse.com, ten atrybut jest już obsługiwany (zaskakująco) w IE7 + i (co nie jest zaskakujące) w innych przeglądarkach: Firefox 12, Chrome 20, Safari 5.1 i Opera 12. Oznacza to, że możemy używać tego elementu w pokoju umysłu bez konieczności konfigurowania fallbacsk dla starszych przeglądarek.
