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

Spalten einer Tabelle dynamisch ändern
Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können, wie das geht wird hier an einem Beispiel demonstriert.
Dateibrowser
Ein einfacher Dateibrowser, ideal um PHP-Scripte auf einem lokalen Webserver zu testen, die PHP-Scripte müssen dann nicht mehr umständlich über die Adresszeile des Browsers aufgerufen werden.
Responsives Design
Ob ein großer Monitor, ein Tablet oder Smartphone verwendet wird, das Design der Seite sollte sich automatisch der Größe des Gerätes anpassen.
Diese Schlagwörter könnten Sie interessieren:
Keyframes Zebra-Tabelle Absolute URL Lokaler Webserver Silbentrennung Datenschutz-Hinweis Chatroom EVA-Prinzip SQLite Fotoalbum ASCII localStorage Berechnungen Zoom-Funktion Canvas Zeitansage Diashow Key Codes Veranstaltungsliste PHP-Fehlermeldungen Zeichenkodierung Counter Backdrop-Filter Animation Zeitfunktionen