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

Bilder in den Browser laden per File API
Wenn Bilder hoch geladen werden sollen, ist es für dem Benutzer wissenswert welche Bilder er überhaupt ausgewählt hat. Diese JavaScript-Funktion zeigt Bilder vor dem hochladen im Browser an.
Suchanfrage an eine Datenbank über AJAX senden und empfangen
Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.
Zeitbalken
Dieses Script zeigt die vergangene Zeit mit einem farbigen Fortschrittsbalken an. Mit JavaScript oder PHP kann man die vergangene Zeit berechnen lassen und mit CSS wird dann der Fortschrittsbalken farbig angezeigt.
Diese Schlagwörter könnten Sie interessieren:
Hover-Effekt Zeitansage Zeitfunktionen Wecker Zeitbalken SQLite PHP-Fehlermeldungen Mehrfachauswahl Event-Kalender Gästebuch Mimetypen Canvas Silbentrennung ASCII Counter Favicon Diashow Zeichenkodierung Textgestaltung Suchmaschine