Erstellen eines Inline-Texteditors mit dem contentEditable-Attribut

() translation by (you can also view the original English article)

Das Erstellen eines Inline-Editors erfordert Aufwand. Zunächst tauschen Sie das zu bearbeitende Element mit einem input oder textarea Element. Für eine nahtlose Benutzererfahrung müssen Sie möglicherweise auch einiges an CSS verwenden, um die Optik der ausgetauschten Elemente analog zum ursprünglichen Element zu gestalten. Sobald der Benutzer mit der Bearbeitung fertig ist, müssen Sie die Elemente erneut wechseln, nachdem Sie alle Inhalte in die originalen Elemente kopiert haben.

Das contentEditable-Attribut erleichtert diese Aufgabe erheblich. Alles, was Sie tun müssen, ist dieses Attribut auf true zu setzen und Standard-HTML5-Elemente werden editierbar. In diesem Tutorial erstellen wir einen Inline-Rich-Text-Editor basierend auf dieser Funktion.

Die Grundlagen

Dieses Attribut kann drei gültige Werte annehmen. Diese sind true, false und inherit. Der Wert true gibt an, dass das Element bearbeitbar ist. Eine leere Zeichenfolge wird ebenfalls als true ausgewertet. false gibt an, dass das Element nicht bearbeitet werden kann. Der Wert inherit ist der Standardwert. inherit gibt an, dass ein Element bearbeitet werden kann, wenn sein unmittelbares übergeordnetes Element bearbeitet werden kann. Dies bedeutet, dass, wenn Sie ein Element editierbar machen, alle seine untergeordneten Elemente und nicht nur unmittelbare untegeordnete Elemente bearbeitbar werden, es sei denn, Sie legen ihr contentEditable-Attribut explizit auf false fest.

Sie können diese Werte dynamisch mit JavaScript ändern. Wenn der neue Wert keiner der drei gültigen Wert ist, löst er eine SyntaxError-Ausnahme aus.

Erstellen des Editors

Um den Inline-Editor zu erstellen, müssen Sie die Möglichkeit haben, den Wert des contentEditable-Attributs zu ändern, wenn ein Benutzer beschließt, etwas zu bearbeiten.

Beim Umschalten des contentEditable-Attributs ist es notwendig zu wissen, welchen Wert das Attribut derzeit hat. Um dies zu erreichen, können Sie die isContentEditable-Eigenschaft verwenden. Wenn isContentEditable true für ein Element zurückgibt, ist das Element derzeit editierbar, andernfalls nicht. Wir werden diese Eigenschaft in Kürze verwenden, um den Zustand verschiedener Elemente in unserem Dokument zu bestimmen.

Der erste Schritt beim Erstellen des Editors ist die Erstellung einer Schaltfläche zum Umschalten der Bearbeitung und einiger bearbeitbarer Elemente.

<button id="editBtn" type="button">Edit Document</button>

<div id="editor">
    <h1 id="title">A Nice Heading.</h1>
    <p>Last Edited By - <span id="author">Monty Shokeen</span></p>
    <p id="content">Some content that needs correction.</p>
</div>

Jedes Element, das wir editierbar halten möchten, muss seine eigene eindeutige Id haben. Dies ist hilfreich, wenn wir die Änderungen speichern oder später abrufen müssen, um den Text in jedem Element zu ersetzen.

Der folgende JavaScript-Code verarbeitet alle Bearbeitungen und Speicherungen.

var editBtn = document.getElementById('editBtn');
var editables = document.querySelectorAll('#title, #author, #content')

editBtn.addEventListener('click', function(e) {
  if (!editables[0].isContentEditable) {
    editables[0].contentEditable = 'true';
    editables[1].contentEditable = 'true';
    editables[2].contentEditable = 'true';
    editBtn.innerHTML = 'Save Changes';
    editBtn.style.backgroundColor = '#6F9';
  } else {
    // Disable Editing
    editables[0].contentEditable = 'false';
    editables[1].contentEditable = 'false';
    editables[2].contentEditable = 'false';
    // Change Button Text and Color
    editBtn.innerHTML = 'Enable Editing';
    editBtn.style.backgroundColor = '#F96';
    // Save the data in localStorage 
    for (var i = 0; i < editables.length; i++) {
      localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);
    }
  }
});

Wir verwenden querySelectorAll(), um alle bearbeitbaren Elemente in einer Variablen zu speichern. Diese Methode gibt eine NodeList zurück, die alle Elemente in unserem Dokument enthält, die den angegebenen Selektoren entsprechen. Auf diese Weise ist es einfacher, bearbeitbare Elemente mit einer Variablen nachzuverfolgen. Zum Beispiel kann der Titel unseres Dokuments mithilfe von editables[0] aufgerufen werden, was wir als nächstes tun werden.

Als Nächstes fügen wir einen Event-Listener zum Klick-Event unserer Schaltfläche hinzu. Jedes Mal, wenn ein Benutzer auf die Schaltfläche Dokument bearbeiten klickt, überprüfen wir, ob der Titel bearbeitbar ist. Wenn er nicht editierbar ist, legen wir die contentEditable-Eigenschaft für jedes der bearbeitbaren Elemente auf true fest. Darüber hinaus ändert sich der Text 'Dokument bearbeiten' in 'Änderungen speichern'. Nachdem Benutzer einige Änderungen vorgenommen haben, können sie auf die Schaltfläche 'Änderungen speichern' klicken und die vorgenommenen Änderungen können dauerhaft gespeichert werden.

Wenn der Titel editierbar ist, legen wir die contentEditable-Eigenschaft für jedes der bearbeitbaren Elemente auf false fest. An dieser Stelle können wir auch den Inhalt unseres Dokuments auf dem Server speichern, um sie später abzurufen oder die Änderungen mit einer Kopie zu synchronisieren, die an einer anderen Stelle vorhanden ist. In diesem Tutorial werde ich stattdessen alles in localStorage speichern. Beim Speichern des Werts nach localStorage verwende ich die Id jedes Elements, um sicherzustellen, dass ich nichts überschreibe.

Siehe meine Live-CodePen-Demo.

Abrufen gespeicherter Inhalte

Wenn Sie Änderungen an einem der Elemente in der vorherigen Demo vornehmen und die Seite neu laden, werden Sie feststellen, dass die von Ihnen vorgenommenen Änderungen verschwunden sind. Dies liegt daran, dass es keinen Code zum Abrufen der gespeicherten Daten gibt. Nachdem der Inhalt in localStorage gespeichert wurde, müssen wir ihn spä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 prüft, ob der Titel, der Autor oder der Inhalt bereits in localStorage vorhanden ist. Wenn dies der Grund ist, setzen wir den innerHTML der jeweiligen Elemente auf die abgerufenen Werte.

Siehe eine weitere CodePen-Demo.

Den Editor benutzerfreundlicher machen

Um unseren Inline-Editor weiter zu verbessern, müssen wir zwei Änderungen vornehmen. Die erste besteht darin, klar zu unterscheiden zwischen dem, was editierbar ist, und dem, was nicht. Dies kann erreicht werden, indem das Erscheinungsbild von bearbeitbaren Elementen mit CSS geändert wird. Das Ändern der Schriftart und Farbe der betreffenden Elemente sollte den Trick tun. Der Selektor [contenteditable="true"] wendet den folgenden Stil auf Elemente an, wenn das contenteditable-Attribut auf true festgelegt ist.

1	[contenteditable="true"] {
2	font-family: "Rajdhani";
3	color: #C00;
4	}

Die zweite Verbesserung wäre die Möglichkeit, Daten automatisch zu speichern. Sie können dies auf verschiedene Arten tun, z. B. alle fü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 können die Änderungen auch bei jedem keydown-Event speichern.

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

In diesem Tutorial bleibe ich bei der ersten Methode. Es steht Ihnen frei, das automatische Speichern basierend auf jedem Event auszulösen, das in Ihren Projekten besser geeignet erscheint.

Siehe die CodePen-Demo.

Bearbeiten der gesamten Seite mit Design-Modus

contentEditable ist nützlich, wenn Sie einige Elemente auf einer Webseite bearbeiten müssen. Wenn der Inhalt aller oder fast aller Elemente auf einer Webseite geändert werden muss, können Sie die designMode-Eigenschaft verwenden. Diese Eigenschaft gilt für das gesamte Dokument. Um es ein- und auszuschalten, verwenden Sie document.designMode = 'on'; beziehungsweise document.designMode = 'off';.

Dies wird sich in Situationen als wertvoll erweisen, in denen Sie der Designer sind und jemand anderes der Inhaltsersteller ist. Sie stellen ihnen ein Design und einen Dummy-Text zur Verfügung. Später können sie es durch realen Inhalt ersetzen. Um designMode in Aktion zu sehen, öffnen Sie die Konsolenregisterkarte in den Entwicklertools Ihres Browsers. Typ document.designMode = 'on'; in die Konsole und drücken Sie die Eingabetaste. Alles auf dieser Seite sollte jetzt editierbar sein.

Letzte Gedanken

Das contentEditable-Attribut ist in Situationen wie dem schnellen Bearbeiten von Artikeln oder dem Bearbeiten von Kommentaren mit einem einzigen Klick praktisch. Diese Funktion wurde zuerst von IE 5.5 implementiert. Später wurde es von WHATWG standardisiert. Die Browser-Unterstützung ist auch ziemlich gut. Alle wichtigen Browser außer Opera Mini unterstützen dieses Attribut.

JavaScript ist zu einer der De-facto-Sprachen im Web geworden. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie auch beschäftigt zu halten. Wenn Sie nach zusätzlichen Ressourcen suchen, um diese zu studieren oder in Ihrer Arbeit zu verwenden, sehen Sie sich an, was wir auf dem Envato-Marktplatz zur Verfügung haben.

In diesem Tutorial wurden die Grundlagen des contentEditable-Attributs behandelt und erläutert, wie es zum Erstellen eines grundlegenden Inline-Texteditors verwendet werden kann. Im nächsten Tutorial erfahren Sie, wie Sie eine Symbolleiste implementieren und Rich-Text-Bearbeitungsfunktionen bereitstellen.