Dowiedz się, jak ustawić treść strony internetowej jako edytowalną dla odwiedzających witrynę

Zawartość

• Korzystanie z atrybutu Contenteditable
• Obsługa atrybutu Contenteditable
• Jak korzystać z contenteditable
• Utwórz edytowalną listę rzeczy do zrobienia z zawartością

Korzystanie z atrybutu Contenteditable

Udostępnianie tekstu na stronie przez użytkowników jest łatwiejsze niż można się spodziewać. HTML zapewnia w tym celu atrybut: contenteditable.

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

Obsługa atrybutu Contenteditable

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

• Chrome 4.0 i nowsze
• Internet Explorer 6 i nowsze wersje
• Firefox 3.5 i nowsze
• 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: prawda, fałsz i dziedziczenie. Dziedziczenie jest wartością domyślną, co oznacza, że ​​element przyjmuje wartość swojego rodzica. Podobnie wszelkie elementy potomne nowo edytowalnej zawartości będą również edytowalne, chyba że zmienisz ich wartości na false. Na przykład, aby umożliwić edytowanie elementu DIV, użyj:

Utwórz edytowalną listę rzeczy do zrobienia z zawartością

Treść edytowalna jest najbardziej sensowna, gdy połączysz ją z pamięcią lokalną, więc zawartość będzie się utrzymywać między sesjami i wizytami w witrynie.

1. Otwórz stronę w edytorze HTML.
   1. Utwórz wypunktowaną, nieuporządkowaną listę o nazwie moje zadania:
      • Jakieś zadanie
      • Kolejne zadanie

Dodaj atrybut contenteditable do pliku

• element:

Masz teraz listę zadań do edycji, 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żyto Google CDN, ale możesz go hostować samodzielnie lub użyć innego CDN, jeśli wolisz.

Na dole strony, tuż nad tagiem, dodaj swój skrypt:

}); To jest początek funkcji jQuery document.ready i każe przeglądarce załadować ten skrypt po pełnym załadowaniu dokumentu.

Wewnątrz funkcji document.ready dodaj skrypt, aby załadować zadania do localStorage i uzyskać wszystkie zadania, które zostały tam wcześniej zapisane:

1. 1. localStorage.setItem ('myTasksData', this.innerHTML); // zapisz w localStorage

   2. });

   3. if (localStorage.getItem ('myTasksData')) {// jeśli zawartość jest w localStorage

   4. $ („# myTasks”). html (localStorage.getItem ('myTasksData')); // umieść treść na stronie

   5. }

   6.  });

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

Moje zadania

Wprowadź elementy do swojej listy. Przeglądarka zapisze ją dla Ciebie, więc po ponownym otwarciu przeglądarki będzie ona nadal dostępna.

• Jakieś zadanie
• Kolejne zadanie