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

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






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
- PHP mit Sicherheit
- Sicheres Programmieren – Traue niemals den Eingaben des Benutzers! Speichern Sie fremde Benutzereingaben nie ohne eine Überprüfung in einer Datenbank oder in einer Datei ab.
- 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.
Diese Schlagwörter könnten Sie interessieren:
Lokaler Webserver CSRF-Token Kommentar-Box localStorage Formular befüllen Sitemaps-Protokoll Datenschutz-Hinweis AES Mnemonisches Passwort Zeichenkodierung Veranstaltungsliste Animation Zoom-Funktion Canvas Berechnungen Sortierkasten Seitenformatierung Modal-Fenster Passwortschutz Arithmetische Operatoren Counter Operatoren Mausrad Affenformular Wecker
Lokaler Webserver CSRF-Token Kommentar-Box localStorage Formular befüllen Sitemaps-Protokoll Datenschutz-Hinweis AES Mnemonisches Passwort Zeichenkodierung Veranstaltungsliste Animation Zoom-Funktion Canvas Berechnungen Sortierkasten Seitenformatierung Modal-Fenster Passwortschutz Arithmetische Operatoren Counter Operatoren Mausrad Affenformular Wecker