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

Verzeichnis auslesen und mit einem Link verknüpfen
Beispiele wie ein Verzeichnis (Ordner) über PHP ausgelesen und mit einem Link verknüpft wird.
Checkbox (Mehrfachauswahl) und DB-Ausgabe
Mit den Checkboxen lassen sich mehrere Einträge von der DB-Tabelle auswählen, auswerten und ausgeben.
Eine MySQL-Tabelle über Links sortieren
Tabellen haben oft den Nachteil das diese nicht vom Benutzer sortiert werden können, dabei ist es eigentlich ganz einfach.
Diese Schlagwörter könnten Sie interessieren:
Zeitfunktionen localStorage Favicon Gästebuch Responsiv Lokaler Webserver Audio-Player Sitemaps-Protokoll Blätterfunktion Suchmaschine AJAX CSS-Counter Counter Mehrfachauswahl Sortierung Zebra-Tabelle Kommentar-Box PHP-Fehlermeldungen Textgestaltung Silbentrennung