Das Erstellen eines Inline-Editors erfordert Aufwand. Sie beginnen mit dem Umschalten des zu bearbeitenden Elements mit einem Eingang oder Textbereich Feld. Für ein nahtloses Benutzererlebnis müssen Sie möglicherweise auch ein paar CSS-Elemente verwenden, um das Design der ausgelagerten Elemente an das ursprüngliche Element anzupassen. Nachdem der Benutzer die Bearbeitung abgeschlossen hat, müssen Sie die Elemente erneut umschalten, nachdem Sie den gesamten Inhalt in den ursprünglichen kopiert haben. 

Das contentEditable Attribut macht diese Aufgabe viel einfacher. Sie müssen dieses Attribut nur auf setzen wahr und Standard-HTML5-Elemente können bearbeitet werden. In diesem Lernprogramm erstellen wir einen Inline-Rich-Text-Editor, der auf dieser Funktion basiert.

Die Grundlagen

Dieses Attribut kann drei gültige Werte annehmen. Diese sind wahr, falsch und erben. Der Wert wahr zeigt an, dass das Element bearbeitet werden kann. Eine leere Zeichenfolge wird ebenfalls als wahr ausgewertet. falsch zeigt an, dass das Element nicht bearbeitet werden kann. Der Wert erben ist der Standardwert. erben gibt an, dass ein Element bearbeitet werden kann, wenn sein unmittelbares übergeordnetes Element bearbeitet werden kann. Dies bedeutet, dass, wenn Sie ein Element editierbar machen, auch alle untergeordneten Elemente und nicht nur unmittelbare Elemente bearbeitet werden können, es sei denn, Sie haben das Element explizit festgelegt contentEditable zuschreiben falsch. 

Sie können diese Werte dynamisch mit JavaScript ändern. Wenn der neue Wert keiner der drei gültigen Werte ist, wird eine SyntaxError-Ausnahme ausgelöst.

Editor erstellen

Um den Inline-Editor zu erstellen, müssen Sie die Möglichkeit haben, den Wert von zu ändern contentEditable Attribut immer dann, wenn ein Benutzer beschließt, etwas zu bearbeiten. 

Beim Umschalten der contentEditable Attribut ist es notwendig zu wissen, welchen Wert das Attribut aktuell hat. Um dies zu erreichen, können Sie die isContentEditable Eigentum. Ob isContentEditable kehrt zurück wahr für ein Element ist das Element derzeit bearbeitbar, ansonsten nicht. Wir werden diese Eigenschaft in Kürze verwenden, um den Status verschiedener Elemente in unserem Dokument zu ermitteln.

Der erste Schritt beim Erstellen des Editors ist das Erstellen einer Schaltfläche zum Umschalten der Bearbeitung und einiger bearbeitbarer Elemente.

Dokument bearbeiten 
 
Eine schöne Überschrift.
 
Zuletzt bearbeitet von - Monty Shokeen
 
Einige Inhalte, die korrigiert werden müssen.
 

Jedes Element, das wir bearbeiten möchten, muss seine eigene Einzigartigkeit haben Ich würde. Dies ist hilfreich, wenn wir die Änderungen speichern oder später abrufen müssen, um den Text in jedem Element zu ersetzen.

Der folgende JavaScript-Code übernimmt die gesamte Bearbeitung und Speicherung.

var editBtn = document.getElementById ('editBtn'); var editables = document.querySelectorAll ('# title, #author, #content') editBtn.addEventListener ('click', Funktion (e) if (! editables [0] .isContentEditable) editables [0] .contentEditable = ' true '; editables [1] .contentEditable =' true '; editables [2] .contentEditable =' true '; editBtn.innerHTML =' Änderungen speichern '; editBtn.style.backgroundColor =' # 6F9 '; else // Editable Editables deaktivieren [0] .contentEditable = 'false'; editables [1] .contentEditable = 'false'; editables [2] .contentEditable = 'false'; // Schaltflächentext und -farbe ändern editBtn.innerHTML = 'Editieren aktivieren' ; editBtn.style.backgroundColor = '# F96'; // Speichern Sie die Daten in localStorage für (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);   );

Wir gebrauchen querySelectorAll () um alle bearbeitbaren Elemente in einer Variablen zu speichern. Diese Methode gibt a zurück NodeList Diese enthält alle Elemente in unserem Dokument, die von bestimmten Selektoren abgeglichen werden. Auf diese Weise ist es einfacher, bearbeitbare Elemente mit einer Variablen zu verfolgen. Auf den Titel unseres Dokuments kann beispielsweise mit zugegriffen werden editierbare [0], das werden wir als nächstes tun.

Als Nächstes fügen wir dem Klickereignis unserer Schaltfläche einen Ereignis-Listener hinzu. Jedes Mal, wenn ein Benutzer auf die Schaltfläche Dokument bearbeiten klickt, prüfen wir, ob der Titel bearbeitet werden kann. Wenn es nicht editierbar ist, setzen wir die contentEditable Eigenschaft für jedes der bearbeitbaren Elemente zu wahr. Außerdem der Text 'Dokument bearbeiten' ändert sich zu 'Änderungen speichern'. Nachdem der Benutzer einige Änderungen vorgenommen hat, kann er auf klicken 'Änderungen speichern' und die vorgenommenen Änderungen können dauerhaft gespeichert werden.

Wenn der Titel bearbeitet werden kann, setzen wir die contentEditable Eigenschaft für jedes der bearbeitbaren Elemente auf false. An dieser Stelle können wir auch den Inhalt unseres Dokuments auf dem Server speichern, um es später abzurufen oder die Änderungen an einer anderen Kopie zu synchronisieren. In diesem Tutorial werde ich alles speichern lokaler Speicher stattdessen. Beim Speichern des Wertes in lokaler Speicher, Ich benutze die Ich würde um sicherzustellen, dass ich nichts überschreibe. 

Sehen Sie sich meine Live-Demo von CodePen an.

Gespeicherte Inhalte abrufen

Wenn Sie an einem der Elemente in der vorherigen Demo Änderungen vornehmen und die Seite neu laden, werden Sie feststellen, dass die vorgenommenen Änderungen nicht mehr verfügbar sind. Dies liegt daran, dass kein Code zum Abrufen der gespeicherten Daten vorhanden ist. Sobald der Inhalt gespeichert wurde lokaler Speicher, Wir müssen es später abrufen, wenn ein Benutzer die Webseite erneut besucht.

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 ('author');  if (localStorage.getItem ('content')! == null) editables [2] .innerHTML = localStorage.getItem ('content'); 

Der obige Code überprüft, ob Titel, Autor oder Inhalt bereits vorhanden sind lokaler Speicher. Wenn ja, setzen wir die innerHTML der jeweiligen Elemente zu den abgerufenen Werten.

Sehen Sie sich eine weitere CodePen-Demo an. 

Den Editor benutzerfreundlicher machen

Um unseren Inline-Editor weiter zu verbessern, müssen wir zwei Änderungen vornehmen. Die erste besteht darin, eine klare Unterscheidung zwischen dem, was bearbeitet werden kann, und dem, was nicht ist, bereitzustellen. Dies kann erreicht werden, indem das Erscheinungsbild bearbeitbarer Elemente mit CSS geändert wird. Das Ändern der Schriftart und Farbe der betroffenen Elemente sollte den Trick erfüllen. Das [contenteditable = "true"] Der Selektor wendet den folgenden Stil immer auf Elemente an inhaltlich editierbar Attribut ist auf gesetzt wahr.

[contenteditable = "true"] Schriftfamilie: "Rajdhani"; Farbe: # C00; 

Die zweite Verbesserung wäre die Möglichkeit, Daten automatisch zu speichern. Sie können dies auf verschiedene Arten tun, z. B. alle fünf Sekunden automatisch speichern. 

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

Sie können die Änderungen auch auf jedem speichern Taste nach unten Veranstaltung.

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

In diesem Tutorial bleibe ich bei der vorherigen Methode. Sie können das automatische Speichern auf der Grundlage eines Ereignisses auslösen, das in Ihren Projekten angemessener erscheint.

Sehen Sie sich die CodePen-Demo an.

Bearbeiten der gesamten Seite im Designmodus

contentEditable ist nützlich, wenn Sie einige Elemente auf einer Webseite bearbeiten müssen. Wenn der Inhalt aller oder fast aller Elemente einer Webseite geändert werden muss, können Sie das verwenden designMode Eigentum. Diese Eigenschaft gilt für das gesamte Dokument. Um es zu drehen auf und aus, Sie verwenden document.designMode = 'ein'; und document.designMode = 'off'; beziehungsweise.

Dies wird sich in Situationen als nützlich erweisen, in denen Sie der Designer sind und ein anderer der Content-Ersteller ist. Sie geben ihnen ein Design und einen Dummy-Text. Später können sie ihn durch echten Inhalt ersetzen. Sehen designMode Öffnen Sie in Aktion die Registerkarte "Konsole" in den Entwicklerwerkzeugen Ihres Browsers. Art document.designMode = 'ein'; in die Konsole und drücken Sie Eingeben. Alles auf dieser Seite sollte jetzt bearbeitet werden können.

Abschließende Gedanken

Das contentEditable Das Attribut ist in Situationen hilfreich, in denen Artikel schnell bearbeitet werden können oder Benutzer ihre Kommentare mit einem einzigen Klick bearbeiten können. Diese Funktion wurde erstmals von IE 5.5 implementiert. Später wurde es von WHATWG standardisiert. Die Browserunterstützung ist auch ziemlich gut. Alle gängigen Browser außer Opera Mini unterstützen dieses Attribut.  

JavaScript ist zu einer der De-facto-Sprachen geworden, die im Web arbeiten. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.

Dieses Tutorial befasste sich mit den Grundlagen des contentEditable Attribut und wie es verwendet werden kann, um einen grundlegenden Inline-Texteditor zu erstellen. Im nächsten Lernprogramm erfahren Sie, wie Sie eine Symbolleiste implementieren und umfassende Textbearbeitungsfunktionen bereitstellen.