Seite manipulieren mit 'contentEditable'

Mit dem Attribut 'contentEditable' lassen sich einzelne Bereiche oder die gesamte Seite manipulieren. Die Manipulation ist nur virtuell, für alle anderen Benutzer verändert sich nichts.
Am besten funktioniert das im Mozilla Firefox und dem MicrosoftEdge.

Demo

Apfel In einem kleinen Apfel, da sieht es niedlich aus; es sind darin fünf Stübchen, gerade wie in einem Haus. In jedem Stübchen wohnen zwei Kernchen, braun und klein; die liegen drin und träumen vom lieben Sonnenschein.

In diesem Demo lässt sich der Text nach belieben veändern (kopieren, ausschneiden, einfügen), außerdem kann das Bild an eine andere Stelle verschoben werden und die Bildgröße ist änderbar.

Quelltext:
<div contentEditable="true">
  <img src="apfel.gif"> In einem kleinen Apfel, da sieht es niedlich aus ...
</div>

Manipulation mit JavaScript

Mit JavaScript kann man die virtuelle Änderung ein.- oder ausschalten.

Demo

WürfelWürfelWürfelWürfelWürfelWürfel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
function bearbeiten() {
 if (document.getElementById("BUTTON").value == "Reihenfolge ändern") {
 document.getElementById("BUTTON").value = "Reihenfolge jetzt ändern";
 void(document.getElementById("ID").contentEditable = true);
 }
 else {
 document.getElementById("BUTTON").value = "Reihenfolge ändern";
 void(document.getElementById("ID").contentEditable = false);
 }
}
</script>

<div id="ID"
 style="background-color: #FFFFEA; width: 300px; padding: 10px;">
<img src="wuerfel/w3.gif">
<img src="wuerfel/w1.gif">
<img src="wuerfel/w2.gif">
<img src="wuerfel/w6.gif">
<img src="wuerfel/w5.gif">
<img src="wuerfel/w4.gif">
</div>
<br>
<input type="button" id="BUTTON" value="Reihenfolge ändern"
 onClick="bearbeiten()">

Tipps

Zeichenkodierung - Schriftzeichen richtig darstellen
Oft werden Umlaute, Akzentzeichen oder andere fehlerhafte Zeichen auf der Webseite angezeigt. Auch der Inhalt einer E-Mail, vom Kontaktformular der Website, kann falsche Umlautzeichen enthalten. Beispiele um diese Zeichen in der richtigen Zeichenkodierung darzustellen.
Grafik als Zeichenkette speichern und wieder als Grafik ausgeben
Grafiken (Bilder) können problemlos als Zeichenkette gespeichert und wieder ausgelesen werden, wie das genau funktioniert und welchen Sinn es hat erfahren Sie hier.
Fehler 404 mit .htaccess abfangen
Eine Website wird öfters umgebaut, Seiten kommen hinzu, andere Seiten werden entfernt oder bekommen eine neue Adresse. Eine selbst gestaltete Fehler-Weiterleitungsseite, leitet den Besucher sicher zum Angebot der Webseite.
Diese Schlagwörter könnten Sie interessieren:
Formulare Responsiv Audio-Player Dynamische Seiten Key Codes ASCII Wasserzeichen Zugriffsrechte SQLite Metadaten Zeitbalken CSS-Counter Blätterfunktion Sitemaps-Protokoll Datenschutz-Hinweis Dateibrowser Kommentar-Box Sprachumschaltung JSON Linkliste