kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

contenteditable=“true“ – HTML- & CSS live und ohne JavaScript editieren

Wenn ein Anwender direkt auf der Website Inhalte oder Stile verändern kann, dann ist i.d.R. JavaScript im Spiel. Mit dem HTML-Attribut contenteditable, können HTML-Inhalte und CSS-Angaben auch ohne JavaScript editiert werden. Die Einsatzmöglichkeiten sind vielfältig und der Browser-Support ausgezeichnet.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

HTML-Elemente editieren

Mit Hilfe des HTML-Attributs contenteditable und dem Wert true kann ein HTML-Element editierbar gemacht werden. Die Text-Inhalte können anschließend wie in einem input-Feld verändert werden.

Live-Beispiel

Dieser Absatz und die letzte Überschrift können direkt im Browser editiert werden. Probiert es aus!

Editierbare Elemente im Prototyping

Ich nutze das contenteditable="true"-Attribut gerne bei der Arbeit mit Prototypen. Die Möglichkeit Inhalte im Frontend zu editieren, ohne dass die Inhalte gespeichert werden ist beispielweise sehr praktisch, wenn man versucht die Textlängen nebeneinanderstehender Teaser-Boxen auf eine Länge zu formulieren. Ich habe zu diesem Zweck ein kleines Bookmarklet geschrieben, dass per Klick ausgewählte Elemente auf der Website editierbar macht.

ContentEditable-Bookmarklet
Vorschau des Bookmarklets

Prototyping Bookmarklet

Hier findet ihr das Bookmarklet und den Prototypen aus dem Screenshot. Klickt das Bookmarklet an, um es zu aktivieren oder zieht es per Drag and Drop in die Lesezeichen und aktiviert es von dort aus auf einer beliebigen Website. Anschließend könnt ihr per Klick Elemente auswählen und anschließend editieren.
In Chrome könnt ihr übrigens mit Enter neue Listenpunkte in der Navigation hinzufügen und mit Cmd + b Text fetten. Mit Cmd + i können Texte kursiv dargestellt werden.

CSS-Styles editieren

CSS-Angaben können bekanntlich auch innerhalb eines HTML-Dokuments über <style> notiert werden. Somit ist es möglich auch die Stile einer Website über contenteditable zu verändern.



<style contenteditable="true">
  /* CSS-Code */
</style>

Leider wird das style-Element vom Browser automatisch auf display:none; gesetzt. Daher müssen wir das Element zunächst sichtbar machen um den Inhalt editieren zu können.



style { display: block; }

Live-Beispiel

Im folgenden Style-Feld könnt ihr den CSS-Code dieser Website live editieren. Ändert beispielsweise die Farbe von Absätzen in red.

Links/Quellen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

2 Kommentare

  1. Manuel

    Verfasst am 15. Januar 2015 um 15:50 Uhr.

    Tolle Sache! Vielen Dank!

  2. Daniele De Rosa

    Verfasst am 30. April 2015 um 14:58 Uhr.

    Super, kannte ich noch nicht. Vielen Dank für den Artikel!

    Grüße,
    Daniele

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.