Atributul are trei valori posibile: adevărat, fals și moștenit. True înseamnă că elementul poate fi editat. O valoare goală este, de asemenea, tratată ca fiind adevărată. Fals indica faptul ca elementul nu poate fi editat. Valoarea implicită este moștenită, ceea ce înseamnă că elementul poate fi editat dacă cel mai apropiat container parental poate fi de asemenea editat. Aceasta înseamnă că, dacă faceți articolul editabil, atunci toți copiii, inclusiv cei care nu vin, vor fi de asemenea editați. Excepția este pentru copiii cărora contentEditable = false este setat.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Mai întâi trebuie să creați un buton pentru a trece la modul de editare și la textul în sine.
Toate elementele care vor fi editate trebuie să aibă propriul id id. Identificatorii ne vor ajuta la salvarea modificărilor sau când trebuie să salvăm textul pentru înlocuirea ulterioară în fiecare element. Codul JS de mai jos editează și salvează modificările.
Pentru a stoca textul editat într-o variabilă, puteți utiliza querySelectorAll (). Această metodă returnează un NodeList, care stochează toate elementele documentului specificate de un anumit selector. Cu această metodă, este mult mai ușor să urmăriți elemente editabile într-o singură variabilă. De exemplu, puteți accesa antetul documentului utilizând editabile [0], pe care le vom face acum.
Acum trebuie să legați mânerul la eveniment, faceți clic pe buton. În timpul fiecărui clic pe buton de către utilizator, verificăm titlul pentru modul de editare. Dacă titlul nu poate fi editat, setăm proprietatea content editable la true pentru toate elementele editabile. Și modificați textul butonului "Editați documentul" la "Salvați modificările". După ce utilizatorul a efectuat modificările necesare, face clic pe butonul "Salvați modificările", ceea ce duce la salvarea instantanee a modificărilor.
Dacă antetul este editat, toate elementele sunt setate la proprietatea contentEditable la false. În acest stadiu, putem salva conținutul documentului pe server pentru ao folosi ulterior și putem sincroniza modificările cu o copie a documentului. În această lecție, voi păstra totul în localStorage. Pentru a nu suprascrie în mod accidental datele când salvez la localStorage, folosesc id-ul fiecărui element. Demonstrația CodePen
Preluarea conținutului salvat
Dacă faceți modificări în demo și reîncărcați pagina, atunci toate modificările vor fi pierdute. Acest lucru se datorează faptului că nu este scris niciun cod pentru a restaura datele stocate. După salvarea datelor la localStorage, trebuie să le restabilim atunci când utilizatorul redeschide pagina.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
A doua modificare este salvarea automată a datelor. Acest lucru se poate face în moduri diferite. Puteți salva datele la fiecare 5 secunde.
Puteți salva date pentru fiecare eveniment keydown.
În acest articol, am folosit prima metodă. Puteți salva date pentru orice eveniment pe care îl considerați necesar. Demonstrația CodePen
Editarea întregii pagini utilizând proprietatea Mode Design
contentEditable este util când trebuie să modificați mai multe elemente dintr-o pagină Web. Dacă trebuie să modificați toate sau aproape toate elementele de pe pagină, atunci proprietatea designMode vă va ajuta. Această proprietate se aplică întregului document. Pentru a activa și a dezactiva, utilizați document.designMode = 'on'; și document.designMode = 'off';
Această proprietate sa dovedit utilă în situațiile în care sunteți designer și lucrați cu un manager de conținut. Creați un design de pagină și completați-l cu un text de încercare, iar managerii de conținut înlocuiesc acest text cu un text normal. Pentru a vizualiza designMode în acțiune, deschideți consola din panoul browserului browserului, tastați document.designMode = 'on'; și apăsați Enter. Acum totul din pagină poate fi editat.
Gândurile finale
Ediție: Comanda webformself.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame