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

Korzystanie z atrybutu do edycji treści

Jamie Jones / Getty Images

Uczynienie tekstu na stronie internetowej do edycji przez użytkowników jest łatwiejsze niż można by się spodziewać. HTML udostępnia w tym celu atrybut: contenteditable.

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

Obsługa atrybutu Contenteditable Attribute

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

• Chrom 4.0 i wyżej
• Internet Explorer 6 lub nowszy
• Firefox 3.5 lub nowszy
• Safari 3.1 i nowsze
• Opera 10.1 i nowsze
• Microsoft Edge

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

Jak korzystać z treści do edycji

Po prostu dodaj atrybut do elementu HTML, który chcesz udostępnić do edycji. Ma trzy możliwe wartości: prawda, fałsz i dziedziczenie. Dziedzicz jest wartością domyślną, co oznacza, że ​​element przyjmuje wartość swojego rodzica. Podobnie, wszelkie elementy podrzędne twojej nowo edytowalnej treści również będą edytowalne, chyba że zmienisz ich wartości na false. Na przykład, aby umożliwić edycję elementu DIV, użyj:

|_+_|

Utwórz edytowalną listę rzeczy do zrobienia za pomocą Contenteditable

Edytowalna zawartość ma największy sens, gdy połączysz ją z lokalną pamięcią masową, dzięki czemu zawartość pozostaje między sesjami i wizytami w witrynie.

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

Dodaj atrybut contenteditable do

• element:




Masz teraz listę rzeczy do zrobienia, 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





W tym przykładzie użyto sieci CDN Google, ale możesz ją hostować samodzielnie lub użyć innej sieci CDN, jeśli wolisz.

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



|_+_|

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

1. 1. |_+_|
   2. |_+_|
   3. |_+_|
   4. |_+_|
   5. |_+_|
   6. |_+_|

Kod HTML całej strony wygląda tak:



|_+_|






Moje zadania


Wprowadź pozycje do swojej listy. Przeglądarka przechowa go dla Ciebie, więc po ponownym otwarciu przeglądarki nadal będzie tutaj.



• Niektóre zadania
• Kolejne zadanie |__+_|