Crearea unui editor inline necesită efort. Începeți prin comutarea elementului care urmează să fie editat cu un intrare sau textarea camp. Pentru o experiență fără probleme a utilizatorilor, este posibil să fie necesar să utilizați și câteva CSS pentru a potrivi stilul elementelor schimbate cu cele originale. Odată ce utilizatorul este terminat de editat, va trebui din nou să comutați elementele după copierea întregului conținut la cele originale. 

 contenteditable atributul face mult mai ușor această sarcină. Tot ce trebuie să faceți este să setați acest atribut Adevărat și elementele HTML5 standard vor deveni editate. În acest tutorial, vom crea un editor de text îmbogățit în linie bazat pe această caracteristică.

Cele elementare

Acest atribut poate avea trei valori valide. Acestea sunt Adevărat, fals și moşteni. Valoarea Adevărat indică faptul că elementul este editat. Un șir gol va fi, de asemenea, evaluat la adevărat. fals indică faptul că elementul nu poate fi editabil. Valoarea moşteni este valoarea implicită. moşteni indică faptul că un element va putea fi modificat dacă parintele său imediat este editabil. Aceasta implică faptul că dacă faceți un element editabil, toți copiii săi și nu doar cei imediali vor deveni și editați, cu excepția cazului în care vă stabiliți explicit contenteditable atribuit lui fals. 

Puteți modifica aceste valori dinamic cu JavaScript. Dacă noua valoare nu este una dintre cele trei valide valide, atunci aruncă o excepție SyntaxError.

Crearea editorului

Pentru a crea editorul inline, trebuie să aveți posibilitatea de a modifica valoarea lui contenteditable atribut ori de câte ori un utilizator decide să editeze ceva. 

În timpul comutării contenteditable atribut, este necesar să știm ce valoare deține atributul în prezent. Pentru a realiza acest lucru, puteți utiliza funcția isContentEditable proprietate. Dacă isContentEditable se intoarce Adevărat pentru un element atunci elementul este în prezent editabil, altfel nu este. Vom folosi această proprietate în scurt timp pentru a determina starea diferitelor elemente din documentul nostru.

Primul pas în construirea editorului este crearea unui buton pentru a comuta editarea și a unor elemente editabile.

Editați documentul 
 
Un titlu frumos.
 
Ultimul editat de - Monty Shokeen
 
Unele conținut care necesită corectare.
 

Fiecare element pe care intenționăm să îl păstrăm editabil trebuie să aibă propriul său unic id-ul. Acest lucru va fi util atunci când trebuie să salvăm modificările sau să le preluăm mai târziu pentru a înlocui textul în interiorul fiecărui element.

Următorul cod JavaScript gestionează toate editările și salvările.

var editaBtn = document.getElementById ('editBtn'); var editables = document.querySelectorAll ('# title, #author, #content') editBtn.addEventListener ('click', funcția (e) if (editables [0] .isContentEditable) editables [0] .contentEditable = true ", editables [1] .contentEditable = 'true'; editabile [2] .contentEditable = 'true'; editBtn.innerHTML = 'Salvați modificările'; editBtn.style.backgroundColor = '# 6F9'; Dezactivați editarea editabilelor [0] .contentEditable = 'false'; editabile [1] .contentEditable = 'false'; editabile [2] .contentEditable = 'false'; // Schimbarea butonului Text și Color editBtn.innerHTML = ; editBtn.style.backgroundColor = '# F96'; // Salvați datele în localStorage pentru (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);   );

Folosim querySelectorAll () pentru a stoca toate elementele editabile într-o variabilă. Această metodă returnează a NodeList care conține toate elementele din documentul nostru care sunt potrivite cu selectori specifici. În acest fel, este mai ușor să urmăriți elementele editabile cu o singură variabilă. De exemplu, titlul documentului nostru poate fi accesat prin utilizarea editables [0], ceea ce vom face în continuare.

Apoi, adăugăm un eveniment de ascultare la evenimentul de clic al butonului nostru. De fiecare dată când un utilizator face clic pe butonul Edit Document, verificăm dacă titlul este editat. Dacă nu este editabil, setăm contenteditable proprietăți pe fiecare dintre elementele editabile Adevărat. Mai mult decât atât, textul "Editați documentul" schimbări la 'Salvează modificările'. După ce utilizatorii au făcut unele modificări, pot face clic pe 'Salvează modificările' iar modificările efectuate pot fi salvate permanent.

Dacă titlul este editat, setăm contenteditable proprietatea asupra fiecărui element editable la fals. În acest moment, putem, de asemenea, să salvăm conținutul documentului nostru pe server pentru a prelua ulterior sau pentru a sincroniza modificările unei copii care există în altă parte. În acest tutorial o să salvez totul localStorage in schimb. Când salvați valoarea în localStorage, Eu folosesc id-ul din fiecare element pentru a vă asigura că nu suprascriu nimic. 

Vedeți demonstrația Live CodePen.

Preluarea conținutului salvat

Dacă modificați oricare dintre elementele din demo-ul anterior și reîncărcați pagina, veți observa că modificările pe care le-ați făcut au dispărut. Acest lucru se datorează faptului că nu există cod în loc pentru a prelua datele salvate. Odată ce conținutul a fost salvat în localStorage, trebuie să îl preluăm mai târziu când un utilizator accesează din nou pagina web.

dacă (typeof (Storage)! == "undefined") if (localStorage.getItem ('title')! == null) editables [0] .innerHTML = localStorage.getItem ('title');  dacă (localStorage.getItem ("autor")! == null) editables [1] .innerHTML = localStorage.getItem ("autor");  dacă (localStorage.getItem ('conținut')! == null) editables [2] .innerHTML = localStorage.getItem ('conținut'); 

Codul de mai sus verifică dacă titlul, autorul sau conținutul există deja în localStorage. Dacă o fac, am setat innerHTML a elementelor respective la valorile recuperate.

Vedeți o altă demonstrație CodePen. 

Crearea Editorului mai ușor de utilizat

Pentru a ne îmbunătăți în continuare editorul inline, trebuie să facem două schimbări. Prima este de a oferi o distincție clară între ceea ce este editabil și ceea ce nu este. Acest lucru se poate realiza prin modificarea aspectului elementelor editabile cu CSS. Schimbarea fontului și a culorii elementelor în cauză ar trebui să facă truc. [Contenteditable = "true"] selectorul va aplica următorul stil elementelor ori de câte ori contenteditable atributul este setat la Adevărat.

[contenteditable = "adevărat"] font-family: "Rajdhani"; culoare: # C00; 

A doua îmbunătățire ar fi capacitatea de a salva automat datele. Puteți face acest lucru în mai multe moduri, cum ar fi salvarea automată la fiecare cinci secunde. 

setInterval (funcția () pentru (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);  , 5000);

De asemenea, puteți salva modificările la fiecare Tasta în jos eveniment.

document.addEventListener ('keydown', funcția (e) pentru (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);  );

În acest tutorial, mă lipesc de metoda anterioară. Sunteți liber să declanșați salvarea automată pe baza oricărui eveniment care pare mai adecvat în proiectele dvs..

Vizualizați demonstrația CodePen.

Editarea întregii pagini cu modul de proiectare

contenteditable este util când trebuie să editați câteva elemente dintr-o pagină Web. Atunci când conținutul tuturor sau aproape tuturor elementelor dintr-o pagină Web trebuie schimbat, puteți utiliza designMode proprietate. Această proprietate se aplică întregului document. Pentru ao transforma pe și de pe, să utilizați document.designMode = 'on'; și document.designMode = 'off'; respectiv.

Acest lucru se va dovedi valoros în situațiile în care sunteți proiectantul și altcineva este creatorul de conținut. Le oferiți un design și un text fals. Ulterior, îl pot înlocui cu conținut real. A vedea designMode în acțiune, deschideți fila consola în instrumentele de dezvoltare ale browserului dvs. Tip document.designMode = 'on'; în consola și apăsați introduce. Totul de pe această pagină ar trebui să poată fi editabil acum.

Gândurile finale

 contenteditable atributul este convenabil în situații cum ar fi editarea rapidă a articolelor sau permiterea utilizatorilor să își editeze comentariile cu un singur clic. Această caracteristică a fost implementată pentru prima oară de IE 5.5. Ulterior, a fost standardizat de WHATWG. De asemenea, suportul pentru browser este destul de bun. Toate browserele majore pe lângă Opera Mini acceptă acest atribut.  

JavaScript a devenit una dintre limbile de-facto de lucru pe web. Nu este fără curbele de învățare și există o mulțime de cadre și biblioteci pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem la dispoziție pe piața Envato.

Acest tutorial a acoperit elementele de bază ale contenteditable atributul și modul în care acesta poate fi folosit pentru a crea un editor de text inline de bază. Următorul tutorial vă va învăța cum să implementați o bară de instrumente și să oferiți posibilități de editare a textelor bogate.