HTML/Attribute/contenteditable

Der Begriff contenteditable ist mehrdeutig.

• JavaScript/DOM/ElementContentEditable/contentEditable

Das contenteditable-Attribut legt fest, ob Sie den Inhalt eines Elements editieren (verändern) dürfen.

erlaubte Werte	true false
default-Wert	false
erlaubt in	allen Elementen
Browsersupport	Details bei caniuse.com: {{{caniuse}}}

Beispiel

<p contenteditable="true">

legt für den Absatz fest, dass Benutzer den Inhalt verändern können

Beachten Sie: Auch Kindelemente zählen zum Inhalt, falls gewünscht, müssen Sie für diese die Editierbarkeit explizit verbieten.

Weblinks

• W3C: contenteditable
• MDN: Editable_content
• css-tricks: Show and Edit Style Element
• tutsplus: Create an Inline Text Editor With the contentEditable Attribute
• blog.teamtreehouse: Native Rich-Text Editing with the contenteditable Attribute

Funktionsweise

Diese Eigenschaft ist wie Drag & Drop aus dem Internet Explorer 5.5 und schrittweise von anderen Browsern übernommen und standardisiert worden.

Trotzdem haben sich noch einige Unterschiede bewahrt:

• Bei einem Klick auf die Enter-Taste in Textabsätzen werden neue Absätze erzeugt. In Chrome und Opera wird nach einer Überschrift aber ein leeres Div eingefügt.
• Firefox füllt eine leere Tabellenzelle mit <br type="_moz"> bzw. <br type="_moz"></br>. (Hier hilft es die Tabellenzellen mit einem   zu füllen.)

Dies gilt es bei einem eventuellen Auslesen der geänderten Elemente über AjaX zu berücksichtigen.

Beispiel ansehen …

<div id="example-one" contenteditable>
  <p>Alles innerhalb dieses Divs kann angeklickt und verändert werden. Viel Spaß!</p>
  <p><img src="Hund.gif" alt="Hund ..."></p>  

<table>
  <tr>
    <th>Spalte 1</th><th>Spalte 2</th>
  </tr>
  <tr>
    <td></td><td></td>
  </tr>
  <tr>
    <td>&nbsp;  </td><td>&nbsp;  </td>
  </tr>
  <tr>
    <td></td><td><input type="number"></td>
  </tr>      
 </table> 
 
</div>

Das div erhält das Attribut contenteditable. Damit können Inhalt und auch seine Kindelemente beliebig geändert werden.

[contenteditable] { 
  padding: 1em; 
  margin:1em;
  outline: 2px dashed #CCC; 
  position: relative;
}

[contenteditable]:hover { 
  outline: 2px dashed #c32e04; 
}

[contenteditable]:after {
  position: absolute;
  content:'✏';
  right: 0em;
  top: 0em;
  font-size: 3em;
  transform: rotate(45deg);
}

Um die Editierbarkeit des Bereichs auch kenntlich zu machen, ändert sich die Farbe der outline, wenn das Feld active ist.

Benutzerfreundlichkeit

Bei einem input-Element oder einer textarea greifen im Allgemeinen Standardverhalten und browsereigene Festlegungen Zahn in Zahn ineinander, sodass diese als Eingabeelemente erkannt werden.

Bei Elementen, die mit contenteditable ausgezeichnet wurden, muss die Funktionalität erst sichtbar gemacht werden. Deshalb sollte dies auch grafisch an das Aussehen dieser Eingabeelemente angepasst werden.

Anwendungsbeispiele

CSS-Spielwiese: Style sichtbar machen

Chris Coyier von css-tricks schlug 2012 vor, einen Absatz in eine Spielwiese zu verwandeln, indem ein zweiter style-Bereich im body des Dokuments mit display: block sichtbar und mit contenteditable editierbar gemacht wird:

Beispiel ansehen …

<p id="spielwiese">Dieser Absatz hat eine eindeutige id und enthält ein style-Element. Dieses legt eine blaue Schriftfarbe fest. 
<style contenteditable>
p#spielwiese {
	background: #e6f2f7;
	color: blue;
} 

style {
	display: block; 
	color: RebeccaPurple;
	font-family: monospace; 
	margin: 1em; 
	white-space: pre;
} 
</style> 
Außerdem wird der Inhalt des style-Elements angezeigt. Diesen können Sie durch das contenteditable-Attribut beliebig ändern.
</p>

Innerhalb des Absatzes mit der id spielwiese befindet sich Text und ein style-Element. Dieses enthält Festlegungen für die id spielwiese und für das style-Element im body, dessen browsereigene Einstellungen durch display: block überschrieben werden.

Im Validator wirft dieses Beispiel einen Fehler, da style-Elemente nur innerhalb des head erlaubt sind. Im Originalbeispiel wurde mit dem mittlerweile obsoleten scoped-Attribut gearbeitet, das kein aktueller Browser unterstützt. Das style-Element im body würde eventuelle CSS-Festlegungen aus dem head oder externe Stylesheets überschreiben.

HTML-Spielwiese

„Das Seitenbeispiel ist ja ganz nett, aber wie sähe es denn mit mehr Inhalt aus?“ – Sie können Ihre Webseite während der Entwicklung so direkt ausprobieren und anpassen.

Beispiel ansehen …

<body>
<div contenteditable>
		<header>
			<h1>HTML-Spielwiese</h1>
  ...
</div>
</body>

Sie können die gesamte Seite beliebig ändern! Wenn Ihnen das Ergebnis gefällt, können Sie die HTML-Struktur aus dem Seiteninspektor kopieren.
In der Navigation können Sie durch Enter eine neues (unformatiertes) Listenelement einfügen oder mit copy & paste ein a-Element kopieren und dann den Linktext entsprechend anpassen.

Beachten Sie: Das Beispiel enthält ein sonst überflüssiges div-Element nach dem startendem body-Tag, damit es auch im Frickl funktioniert.

Beachten Sie: Wenn Sie innerhalb des editierbaren Bereichs (z.B. durch ein contenteditable-Attribut innerhalb des body-Tags) Links notiert haben, sind diese aus Sicherheitsgründen nicht anklickbar!

Beispiel-Menü für Webprojekt

Um vorhandene Inhalte innerhalb eines Webprojekts zu sortieren, können Sie entweder mit Papier und Bleistift arbeiten oder mithilfe des contenteditable-Attributs eine flexible Navigation aufbauen und belieibg verändern.

Beispiel ansehen …

<body>
<nav contenteditable>

  ...
</nav>
</body>

Sie können die gesamte Navigation beliebig ändern! Wenn Ihnen das Ergebnis gefällt, können Sie die HTML-Struktur aus dem Seiteninspektor kopieren.
In der Navigation können Sie durch Enter eine neues (unformatiertes) Listenelement einfügen oder mit copy & paste ein li-Element kopieren und dann den Inhalt entsprechend anpassen.