Å lage en inline editor krever innsats. Du begynner med å bytte elementet som skal redigeres med en inngang eller textarea felt. For en sømløs brukeropplevelse, må du kanskje også bruke noen CSS for å matche utformingen av bytteelementer til den opprinnelige. Når brukeren er ferdig med redigering, må du igjen bytte elementene etter at alt innhold er kopiert til de opprinnelige. 

De contenteditable Attributt gjør denne oppgaven enklere. Alt du trenger å gjøre er å sette dette attributtet til ekte og standard HTML5-elementer blir redigerbare. I denne veiledningen vil vi opprette en inline rik tekstredigerer basert på denne funksjonen.

Det grunnleggende

Denne attributtet kan ta tre gyldige verdier. Disse er ekte, falsk og arve. Verdien ekte indikerer at elementet kan redigeres. En tom streng vil også evaluere til ekte. falsk indikerer at elementet ikke kan redigeres. Verdien arve er standardverdien. arve indikerer at et element vil bli redigerbart hvis dets umiddelbare forelder er redigerbar. Dette innebærer at hvis du gjør et element redigerbart, vil alle sine barn og ikke bare de umiddelbart bli redigerbare, med mindre du eksplisitt angir deres contenteditable tilskrive falsk. 

Du kan endre disse verdiene dynamisk med JavaScript. Hvis den nye verdien ikke er noen av de tre gyldige, kaster den et SyntaxError-unntak.

Opprette redigereren

For å lage inline editor må du ha muligheten til å endre verdien av contenteditable Tilordne når en bruker bestemmer seg for å redigere noe. 

Mens du bytter på contenteditable Attributt, det er nødvendig å vite hvilken verdi attributten innehar for øyeblikket. For å oppnå det, kan du bruke isContentEditable eiendom. Hvis isContentEditable avkastning ekte For et element så er elementet for øyeblikket redigerbart, ellers er det ikke. Vi vil snart bruke denne egenskapen til å bestemme tilstanden til ulike elementer i dokumentet vårt.

Det første trinnet i å bygge redaktøren er å skape en knapp for å bytte redigering og noen redigerbare elementer.

Rediger dokument 
 
En fin overskrift.
 
Sist redigert av - Monty Shokeen
 
Noen innhold som trenger korreksjon.
 

Hvert element som vi har til hensikt å beholde redigerbar, må ha sin egen unike id. Dette vil være nyttig når vi må lagre endringene eller hente dem senere for å erstatte teksten i hvert element.

Følgende JavaScript-kode håndterer alle redigering og lagring.

var editBtn = document.getElementById ('editBtn'); var editables = document.querySelectorAll ('# title, #author, #content') editBtn.addEventListener ('klikk', funksjon (e) hvis (! editables [0] .isContentEditable) editables [0] .contentEditable = ' true '; editables [1] .contentEditable =' true '; editables [2] .contentEditable =' true '; editBtn.innerHTML =' Lagre endringer '; editBtn.style.backgroundColor =' # 6F9 '; else // Deaktiver redigering editables [0] .contentEditable = 'false'; editables [1] .contentEditable = 'false'; editables [2] .contentEditable = 'false'; // Endre knapp Tekst og farge editBtn.innerHTML = 'Aktiver redigering' ; editBtn.style.backgroundColor = '# F96'; // Lagre dataene i localStorage for (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);   );

Vi bruker querySelectorAll () å lagre alle redigerbare elementer i en variabel. Denne metoden returnerer a NodeList som inneholder alle elementene i dokumentet som matches av bestemte selektorer. På denne måten er det lettere å holde rede på redigerbare elementer med en variabel. For eksempel kan tittelen på dokumentet vårt nås ved å bruke editables [0], som er hva vi skal gjøre neste gang.

Deretter legger vi til en hendelseslytter til knappens klikkhendelse. Hver gang en bruker klikker på Rediger dokument-knappen, kontrollerer vi om tittelen kan redigeres. Hvis det ikke er redigerbart, setter vi inn contenteditable Egenskapen på hvert av de redigerbare elementene til ekte. Videre er teksten 'Rediger dokument' endres til 'Lagre endringer'. Etter at brukerne har gjort noen endringer, kan de klikke på 'Lagre endringer' knappen og endrede endringer kan lagres permanent.

Hvis tittelen er redigerbar, setter vi inn contenteditable Egenskapen på hvert av de redigerbare elementene er falsk. På dette tidspunktet kan vi også lagre innholdet i dokumentet vårt på serveren for å hente senere eller synkronisere endringene til en kopi som eksisterer et annet sted. I denne opplæringen skal jeg lagre alt i lokal lagring i stedet. Når du lagrer verdien i lokal lagring, Jeg bruker id av hvert element for å sikre at jeg ikke overskriver noe. 

Se min live CodePen-demo.

Henter lagret innhold

Hvis du gjør endringer i noen av elementene i forrige demo og laster på siden, vil du legge merke til at endringene du har gjort, er borte. Dette skyldes at det ikke er noen kode på plass for å hente de lagrede dataene. Når innholdet er lagret i lokal lagring, Vi må hente det senere når en bruker besøker nettsiden igjen.

if (typeof (Storage)! == "undefined") if (localStorage.getItem ('title')! == null) editables [0] .innerHTML = localStorage.getItem ('title');  hvis (localStorage.getItem ('author')! == null) editables [1] .innerHTML = localStorage.getItem ('author');  hvis (localStorage.getItem ('content')! == null) editables [2] .innerHTML = localStorage.getItem ('content'); 

Koden ovenfor kontrollerer om tittelen, forfatteren eller innholdet allerede finnes i lokal lagring. Hvis de gjør det, setter vi innerhtml av de respektive elementene til de hentede verdiene.

Se en annen CodePen-demo. 

Gjør redaktøren mer brukervennlig

For å forbedre vår inline editor må vi gjøre to endringer. Den første er å gi et tydelig skille mellom hva som kan redigeres og hva som ikke er. Dette kan oppnås ved å endre utseendet på redigerbare elementer med CSS. Endre skrift og farge på de aktuelle elementene bør gjøre trikset. De [Contenteditable = "true"] velgeren vil bruke følgende stil til elementer når contenteditable Attributtet er satt til ekte.

[contenteditable = "true"] font-family: "Rajdhani"; farge: # C00; 

Den andre forbedringen ville være muligheten til automatisk lagring av data. Du kan gjøre det på flere måter, som automatisk lagring hvert femte sekund. 

setInterval (funksjon () for (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);  , 5000);

Du kan også lagre endringene på hver keydown begivenhet.

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

I denne opplæringen klamrer jeg med den tidligere metoden. Du er fri til å utløse automatisk lagring basert på noe arrangement som synes mer hensiktsmessig i prosjektene dine.

Se CodePen-demoen.

Redigerer hele siden med designmodus

contenteditable er nyttig når du må redigere noen elementer på en nettside. Når innholdet av alle eller nesten alle elementene på en nettside må endres, kan du bruke designMode eiendom. Denne egenskapen gjelder for hele dokumentet. Å slå den på og av, du bruker document.designMode = 'on'; og document.designMode = 'off'; henholdsvis.

Dette vil bli verdifullt i situasjoner der du er designeren, og noen andre er innholdsskaperen. Du gir dem et design og litt dummy tekst. Senere kan de erstatte det med ekte innhold. Å se designMode i gang åpner du konsollfanen i nettleserens utviklerverktøy. Type document.designMode = 'on'; inn i konsollen og trykk Tast inn. Alt på denne siden skal kunne redigeres nå.

Siste tanker

De contenteditable Attributt er praktisk i situasjoner som raskt redigere artikler eller gjør det mulig for brukere å redigere sine kommentarer med ett enkelt klikk. Denne funksjonen ble først implementert av IE 5.5. Senere ble det standardisert av WHATWG. Nettleserstøtten er også ganske bra. Alle større nettlesere i tillegg til Opera Mini støtter dette attributtet.  

JavaScript har blitt et av de de facto-språkene for å jobbe på nettet. Det er ikke uten det er læringskurver, og det er nok av rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.

Denne opplæringen dekket grunnleggende om contenteditable attributt og hvordan det kan brukes til å lage et grunnleggende inline tekstredigeringsprogram. Den neste opplæringen vil lære deg hvordan du implementerer en verktøylinje og gir rik tekstredigeringsfunksjonalitet.