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

Lokalen Webserver einrichten und verwenden
Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.
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.
RSS-Feed selbst erstellen
Ein RSS-Feed lässt sich, mit wenigen Codezeilen, einfach selbst erstellen. Diese stellen in erster Linie ein vorzügliches Instrument dar, den Bekanntheitsgrad einer Website zu steigern.
Diese Schlagwörter könnten Sie interessieren:
Animation Dynamische Seiten Backdrop-Filter Hover-Effekt Zeitansage Key Codes Zoom-Funktion Blätterfunktion PHPMailer Datenschutz-Hinweis Lokaler Webserver Mausrad Sprachumschaltung JSON Sicherheit Operatoren PHP-Fehlermeldungen Sortierung Suchmaschine Event-Kalender Gästebuch Audio-Player Sitemaps-Protokoll Marquee Affenformular