Het maken van een inline-editor vereist inspanning. U begint met het element dat bewerkt moet worden te veranderen met een invoer of textarea veld. Voor een naadloze gebruikerservaring, moet u mogelijk ook een aantal CSS gebruiken om de stijl van verwisselde elementen aan te passen aan de oorspronkelijke stijl. Als de gebruiker klaar is met bewerken, moet u opnieuw van element veranderen nadat u alle inhoud naar de originele hebt gekopieerd. 

De contentEditable kenmerk maakt deze taak een stuk eenvoudiger. Het enige dat u hoeft te doen, is dit kenmerk instellen waar en standaard HTML5-elementen kunnen bewerkbaar worden. In deze zelfstudie maken we een inline Rich Text-editor op basis van deze functie.

De basis

Dit kenmerk kan drie geldige waarden aannemen. Dit zijn waar, vals en erven. De waarde waar geeft aan dat het element bewerkbaar is. Een lege string zal ook evalueren naar waar. vals geeft aan dat het element niet bewerkbaar is. De waarde erven is de standaardwaarde. erven geeft aan dat een element kan worden bewerkt als het directe bovenliggende element bewerkbaar is. Dit houdt in dat als u een element bewerkbaar maakt, al uw onderliggende en niet alleen directe kunnen worden bewerkt, tenzij u expliciet hun contentEditable attribuut aan vals. 

U kunt deze waarden dynamisch wijzigen met JavaScript. Als de nieuwe waarde geen van de drie geldige is, wordt er een SyntaxError-uitzondering gegenereerd.

De editor maken

Als u de inline-editor wilt maken, moet u de mogelijkheid hebben om de waarde van de te wijzigen contentEditable attribuut wanneer een gebruiker beslist iets te bewerken. 

Tijdens het omschakelen van de contentEditable attribuut, is het noodzakelijk om te weten welke waarde het attribuut momenteel bezit. Om dit te bereiken, kunt u de isContentEditable eigendom. Als isContentEditable komt terug waar voor een element is het element momenteel bewerkbaar, anders niet. We zullen deze eigenschap binnenkort gebruiken om de status van verschillende elementen in ons document te bepalen.

De eerste stap bij het bouwen van de editor is het maken van een knop om bewerken en sommige bewerkbare elementen te schakelen.

Bewerk document 
 
Een mooie rubriek.
 
Laatst bewerkt door - Monty Shokeen
 
Sommige inhoud die moet worden gecorrigeerd.
 

Elk element dat we bewerkbaar willen houden, moet zijn eigen unieke karakter hebben ID kaart. Dit is handig wanneer we de wijzigingen moeten opslaan of later moeten ophalen om de tekst in elk element te vervangen.

De volgende JavaScript-code handelt alle bewerkingen en opslag af.

var editBtn = document.getElementById ('editBtn'); var editables = document.querySelectorAll ('# title, #author, #content') editBtn.addEventListener ('klik', functie (e) if (! editables [0] .isContentEditable) editables [0] .contentEditable = ' true '; editables [1] .contentEditable =' true '; bewerkbare tekens [2] .contentEditable =' true '; editBtn.innerHTML =' Wijzigingen opslaan '; editBtn.style.backgroundColor =' # 6F9 '; else // Uitschakelen Bewerkbare bewerkingen bewerken [0] .contentEditable = 'false'; bewerkbare tekens [1] .contentEditable = 'false'; bewerkbare tekens [2] .contentEditable = 'false'; // Knop Tekst- en kleurbewerking wijzigenBtn.innerHTML = 'Bewerken inschakelen " ; editBtn.style.backgroundColor = '# F96'; // Sla de gegevens op in localStorage voor (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);   );

We gebruiken querySelectorAll () om alle bewerkbare elementen in een variabele op te slaan. Deze methode retourneert een nodelist die alle elementen in ons document bevat die overeenkomen met opgegeven selectors. Op deze manier is het gemakkelijker om bewerkbare elementen bij te houden met één variabele. De titel van ons document is bijvoorbeeld toegankelijk via editables [0], dat is wat we hierna zullen doen.

Vervolgens voegen we een gebeurtenislistener toe aan de klikgebeurtenis van onze knop. Telkens wanneer een gebruiker op de knop Document bewerken klikt, controleren we of de titel bewerkbaar is. Als het niet bewerkbaar is, stellen we de contentEditable eigenschap op elk van de bewerkbare elementen in waar. Bovendien is de tekst 'Document bewerken' veranderd naar 'Wijzigingen opslaan'. Nadat gebruikers enkele bewerkingen hebben uitgevoerd, kunnen ze op de knop klikken 'Wijzigingen opslaan' knop en de gemaakte wijzigingen kunnen permanent worden opgeslagen.

Als de titel bewerkbaar is, stellen we de contentEditable eigenschap op elk van de bewerkbare elementen false. Op dit punt kunnen we de inhoud van ons document ook opslaan op de server om deze later op te halen of de wijzigingen aan een kopie die ergens anders bestaat, synchroniseren. In deze tutorial ga ik alles opslaan lokale opslag in plaats daarvan. Bij het opslaan van de waarde in lokale opslag, Ik gebruik de ID kaart van elk element om ervoor te zorgen dat ik niets overschrijf. 

Zie mijn live CodePen-demo.

Opgeslagen inhoud ophalen

Als u wijzigingen in een van de elementen in de vorige demo aanbrengt en de pagina opnieuw laadt, zult u merken dat de wijzigingen die u hebt aangebracht, verdwenen zijn. Dit komt omdat er geen code is om de opgeslagen gegevens op te halen. Zodra de inhoud is opgeslagen lokale opslag, we moeten het later ophalen wanneer een gebruiker de webpagina opnieuw bezoekt.

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

De bovenstaande code controleert of de titel, auteur of inhoud al bestaat lokale opslag. Als ze dat doen, stellen we de innerHTML van de respectieve elementen voor de opgehaalde waarden.

Zie een andere CodePen-demo. 

De editor gebruiksvriendelijker maken

Om onze inline-editor verder te verbeteren, moeten we twee wijzigingen aanbrengen. De eerste is om een ​​duidelijk onderscheid te maken tussen wat bewerkbaar is en wat niet. Dit kan worden bereikt door het uiterlijk van bewerkbare elementen te wijzigen met CSS. Het lettertype en de kleur van de betreffende elementen veranderen zou de slag moeten slaan. De [Contenteditable = "true"] selector past de volgende stijl toe op elementen wanneer de contenteditable attribuut is ingesteld op waar.

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

De tweede verbetering zou de mogelijkheid zijn om gegevens automatisch op te slaan. Je kunt het op verschillende manieren doen, zoals elke vijf seconden automatisch opslaan. 

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

U kunt de wijzigingen ook op elke opslaan toets neer evenement.

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

In deze tutorial blijf ik bij de vorige methode. U bent vrij om automatisch opslaan in te schakelen op basis van een gebeurtenis die beter bij uw projecten past.

Bekijk de CodePen-demo.

De volledige pagina bewerken met ontwerpmodus

contentEditable is handig als u een paar elementen op een webpagina moet bewerken. Wanneer de inhoud van alle of bijna alle elementen op een webpagina moet worden gewijzigd, kunt u de designMode eigendom. Deze eigenschap is van toepassing op het hele document. Om het te veranderen op en uit, je gebruikt document.designMode = 'aan'; en document.designMode = 'uit'; respectievelijk.

Dit zal waardevol zijn in situaties waarin jij de ontwerper bent en iemand anders de maker van de inhoud is. Je geeft ze een ontwerp en wat dummy tekst. Later kunnen ze deze vervangen door echte inhoud. Zien designMode in actie, open het tabblad console in de ontwikkeltools van uw browser. Type document.designMode = 'aan'; in de console en druk op invoeren. Alles op deze pagina zou nu bewerkbaar moeten zijn.

Laatste gedachten

De contentEditable kenmerk is handig in situaties zoals snel bewerken van artikelen of gebruikers in staat stellen om hun opmerkingen te bewerken met een enkele klik. Deze functie is voor het eerst geïmplementeerd door IE 5.5. Later werd het gestandaardiseerd door WHATWG. De browserondersteuning is ook redelijk goed. Alle belangrijke browsers naast Opera Mini ondersteunen dit kenmerk.  

JavaScript is een van de de-facto talen geworden van het werken op het web. Het is niet zonder zijn leercurve, en er zijn ook genoeg kaders en bibliotheken om je bezig te houden. Als u op zoek bent naar extra bronnen om te studeren of te gebruiken in uw werk, kijk dan wat we beschikbaar hebben op de Envato-marktplaats.

Deze tutorial behandelde de basis van de contentEditable attribuut en hoe het kan worden gebruikt om een ​​eenvoudige inline-teksteditor te maken. In de volgende zelfstudie leert u hoe u een werkbalk kunt implementeren en uitgebreide bewerkingsmogelijkheden voor tekst kunt bieden.