A weboldal tartalmának szerkesztése a webhely látogatói által

A szöveg egyszerűbb szerkesztése a felhasználók számára, mint amire számíthat. A HTML egy attribútumot biztosít erre a célra: contenteditable.

A contenteditable attribútum először 2014-ben jelent meg a HTML5 kiadásával. Azt határozza meg, hogy az általa irányított tartalmat a böngészőben a webhely látogatója megváltoztathatja.

Támogatja a Tartalomképes tulajdonságot

A legtöbb modern asztali böngésző támogatja az attribútumot. Ezek tartalmazzák:

• Chrome 4.0 és újabb
• Internet Explorer 6 és újabb
• Firefox 3.5 és újabb
• Safari 3.1 és újabb
• Opera 10.1 és újabb
• Microsoft Edge

Ugyanez vonatkozik a legtöbb mobil böngészőre is.

Hogyan használjuk a tartalmat

Egyszerűen adja hozzá az attribútumot a szerkeszteni kívánt HTML elemhez. Három lehetséges értéke van:igaz, hamis és örököl. Örököl az alapértelmezett érték, ami azt jelenti, hogy az elem a szülő értékét veszi fel. Hasonlóképpen az újonnan szerkeszthető tartalmak bármelyik gyermekeleme is szerkeszthető, hacsak nem módosítja értékét hamis. Például, hogy a DIV elem szerkeszthető, használata:

Hozzon létre egy szerkeszthető teendő listát Contenteditable-el

A szerkeszthető tartalom a legmegfelelőbb, ha párosítja a helyi tárhelyet, így a tartalom a munkamenetek és a helyszíni látogatások között továbbra is fennáll.

1. Nyissa meg oldalát egy HTML-szerkesztőben.
2. Hozzon létre egy felsorolt, nem rendezett listát myTasks:
   2. Néhány feladat
   4. Egy másik feladat
5. Adja hozzá acontenteditable attribútum a
   elem:
   Most van egy szerkeszthető teendője, de ha bezárja a böngészőt vagy elhagyja az oldalt, a lista eltűnik. A megoldás: Adjon hozzá egy egyszerű szkriptet, hogy mentse a feladatokat a localStorage-ba.
8. Link hozzáadása a jQueryhez a a dokumentumot. Ez a példa a Google CDN-t használja, de saját maga is otthont adhat, vagy ha egy másik CDN-t használ, akkor tetszés szerint.
11. Az oldal alján, közvetlenül a tag, add hozzá a szkriptet: Ez a jQuery kezdete document.ready funkciót, és azt mondja a böngészõnek, hogy töltse be ezt a szkriptet a dokumentum teljes betöltése után.

Benne document.ready add hozzá a szkripthez, hogy betöltse a feladatokat a localStorage-ba és szerezzen be minden olyan feladatot, amelyet korábban mentettek: $ (document.ready (függvény () {

1. blur (function () {// amikor a kurzor elhagyja a #myTasks elemet
4. localStorage.setItem ('myTasksData', this.innerHTML); // save to localStorage
7. });
10. ha (localStorage.getItem ('myTasksData')) {// ha a tartalom a localStorage
13. $ ( "# MyTasks"). Html (localStorage.getItem (myTasksData ')); // tartsa be a tartalmat a lapon
16. }
17. });

Az egész oldal HTML-je így néz ki:

Saját feladatok

Adja meg a listához tartozó elemeket. A böngésző tárolja az Ön számára, így a böngésző újbóli megnyitásakor továbbra is itt lesz.

• Néhány feladat
• Egy másik feladat