Udostępnianie zawartości strony internetowej przez użytkowników witryny

Tworzenie tekstu na stronie internetowej do edycji przez użytkowników jest łatwiejsze niż można się spodziewać. HTML zapewnia atrybut do tego celu: contenteditable.

The contenteditable atrybut został po raz pierwszy wprowadzony w 2014 roku wraz z wydaniem HTML5. Określa, czy treść, którą reguluje, może zostać zmieniona przez odwiedzającego witrynę z poziomu przeglądarki.

Obsługa atrybutu Contenteditable

Większość nowoczesnych przeglądarek komputerowych obsługuje ten atrybut. Obejmują one:

Chrome 4.0 i nowsze
Internet Explorer 6 lub nowszy
Firefox 3.5 i nowsze wersje
Safari 3.1 i nowsze
Opera 10.1 i nowsze
Microsoft Edge

To samo dotyczy większości przeglądarek mobilnych.

Jak korzystać z contenteditable

Po prostu dodaj atrybut do elementu HTML, który chcesz edytować. Ma trzy możliwe wartości:prawdziwe, fałszywy i dziedziczyć. Dziedziczyć jest wartością domyślną, co oznacza, że element przyjmuje wartość swojego elementu nadrzędnego. Podobnie, wszelkie elementy podrzędne nowo edytowalnej treści będą również edytowalne, chyba że zmienisz ich wartości fałszywy. Na przykład, aby utworzyć DIV element edytowalny, użyj:

Utwórz edytowalną listę zadań do wykonania z Contenteditable

Edytowalna zawartość ma najwięcej sensu, gdy paruje się ją z pamięcią lokalną, przez co treść pozostaje między sesjami a wizytami w witrynie.

Otwórz swoją stronę w edytorze HTML.
Utwórz wypunktowaną, nieuporządkowaną listę o nazwie moje zadania: Niektóre zadania Kolejne zadanie


Dodajcontenteditable atrybut do

 element: 

 Masz teraz listę zadań do wykonania, którą można edytować, ale jeśli zamkniesz przeglądarkę lub opuścisz stronę, lista zniknie. Rozwiązanie: Dodaj prosty skrypt, aby zapisać zadania w localStorage.


Dodaj link do jQuery w 
 twojego dokumentu.  W tym przykładzie używasz CDN Google, ale możesz go hostować samodzielnie lub użyć innej CDN, jeśli wolisz.


U dołu strony, tuż nad tag, dodaj swój skrypt:  To jest początek jQuery document.ready funkcja i informuje przeglądarkę, aby załadowała ten skrypt po pełnym załadowaniu dokumentu.


W środku document.ready funkcja, dodaj skrypt, aby załadować zadania do localStorage i uzyskać wszelkie zadania, które zostały tam wcześniej zapisane: $ (document.ready (function () {

 $ ("# myTasks"). blur (function () {// gdy kursor opuszcza element #myTasks 
 
 
 localStorage.setItem ("myTasksData", this.innerHTML); // zapisz w localStorage
  
 
 });
  
 
 if (localStorage.getItem ('myTasksData')) {// jeśli jest zawartość w localStorage
  
 
 $ ("# myTasks"). html (localStorage.getItem ("myTasksData")); // umieść treść na stronie
  
 
 }
  });

Kod HTML całej strony wygląda następująco:

Moje zadania

`Moje zadania`



Wprowadź elementy dla swojej listy. Przeglądarka przechowa je za Ciebie, aby po ponownym otwarciu przeglądarki nadal będzie tutaj.


Niektóre zadania

Kolejne zadanie