Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. Tristan
    schrieb am 25.02.2020 um 18:17 Uhr:

    Hallo Jonas,

    funktioniert das Bookmarklet nicht mehr oder bin ich nur zu ¯\_(ツ)_/¯ ?

    Habe es in Safari 13, Chorme 80 und Firefox 73 ausprobiert.

    Danke und Gruß
    Tristan

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 25.02.2020 um 20:07 Uhr:

      Hallo Tristan, jetzt geht es wieder :) Die Demo war ein wenig in die Jahre gekommen und das Script wurde aufgrund fehlender HTTPS-Verbindung nicht geladen.

      Antworten
  2. Jens Kühn
    schrieb am 30.11.2018 um 09:38 Uhr:

    Ich habe gerade diesen Befehl gefunden: document.designMode = „on“.
    Einfach einschalten und mit der Bearbeitung von Text auf einem beliebigen Element auf der Website beginnen.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 30.11.2018 um 09:46 Uhr:

      Ja – ich glaube dazu gibt es sogar einen iOS Shortcut, damit kann man das auch auf iPad und iPhone in Safari aktivieren.

      Antworten
  3. Daniele De Rosa
    schrieb am 30.04.2015 um 14:58 Uhr:

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

    Grüße,
    Daniele

    Antworten
  4. Manuel
    schrieb am 15.01.2015 um 15:50 Uhr:

    Tolle Sache! Vielen Dank!

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Anspruchsvolle Projekte mit kulturbanause

Wir lieben es gewachsene Strukturen aufzuräumen und perfekt im Content Management abzubilden. Strukturell komplexe Projekte realisieren wir regelmäßig und sehr gerne.

Konzeptionelles Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →