Wysiwyg-Editor: Speichern von Hypertext und HTML-Seiten

Kleines Tutorial: Wysiwyg-Editor / Speichern als HTML-Seiten

Übersicht / Seite:

Wysiwyg-Editor (Ein kleines Tutorial, Einleitung)
Erster Beispiel (mit einem Listing für einen kleinen Wysiwyg-Editor)
Auswahllisten (für Schriftfamilie, Schriftgröße, Schriftfarbe und H...)
Einfügen von Hyperlinks (und Einfügen von Listen)
Einfügen von Fotos (und sonstigen Grafiken)
Inhalt verarbeiten (Quelltext ausgeben oder senden und speichern)
Fertiger Editor (Ansicht, Funktionen und Hinweise zum Download)
HTML speichern (Beispiel-Listing zum Speichern von Hypertext)
Farbpalette (nur als Demo oder zum Einbinden in Webseiten)

Beispiel-Listing

Das Listing auf dieser Seite ist kein Bestandteil des eigentlichen, zum Download bereitgestellten Scripts, da es nur als Beispiel dienen soll, wie fertig bearbeitete Inhalte als HTML-Seiten abgespeichert werden können. Statt als HTML-Seiten könnten die bearbeiteten Inhalte selbstverständlich ebenso als Hypertext in einer Datenbank gespeichert werden, wobei die Vorgehensweise sich nicht grundlegend ändern würde. Lediglich das in diesem Fall nicht der Head als solcher mit den zum Head gehörenden Elementen in einer Datenbank abgelegt wird, sondern nur die jeweiligen Werte.

Im Listing wird zuerst innerhalb von if-Statements mit isset() abgefragt, ob Post mit den jeweiligen Parametern eingetroffen ist, wobei die Namen der Parameter den Elemente-Namen des Formulars entsprechen und mit !empty() wird überprüft, ob mit den Parametern Werte ungleich Null / 0 übermittelt wurden. Verläuft die Auswertung positiv, werden die übermittelten Werte mit der Funktion preg_replace() gefiltert. Für die Filterung wird jeweils eine passende Zeichenklasse definiert, in welcher nur die erlaubten Zeichen aufgenommen werden. Einzig der eigentliche Quelltext wird nicht gefiltert.

Das Beispiel-Listing:

<!DOCTYPE html>
<html>

<head>
<title>Speichern</title>
<meta charset="windows-1252">
<style type="text/css">
body  {background-color: #F1EDDA; font-family: verdana; font-size: 13px}
p.abs {text-align: center; padding: 20px}
</style>
</head>

<body>
<h1 style="text-align: center">Inhalt speichern</h1>

<?php

/*-------------------------------------------------------------
 Dieses Listing ist nur als ein Beispiel gedacht.
 --------------------------------------------------------------
*/

if (isset($_POST["FrameInhalt"]) and !empty($_POST["FrameInhalt"])){

    $quelltext = trim($_POST["FrameInhalt"]);
    echo "<p class=\"abs\">Der Inhalt des Frames wurde übergeben und wird ".
    "abgespeichert.</p>\n";
    }
    else {echo "<p class=\"abs\">Fehler, keine Post von FrameInhalt<br>".
    "Die Datei wird ohne Inhalt abgespeichert.</p>\n";

    $quelltext = "Ohne Inhalt";
}

if (isset($_POST["TiteldsM"]) and !empty($_POST["TiteldsM"])){

    $titeldsm = trim($_POST["TiteldsM"]);
    echo "<p class=\"abs\">Ein Titel wurde übergeben.</p>\n";
    $titeldsm = preg_replace("/[^a-zA-ZäöüÄÖÜß0-9,.-]/"," ",$titeldsm);
    }
    else {echo "<p class=\"abs\">Es wurde kein Titel übergeben.</p>\n";

    $titeldsm = "Ohne Titel";
}

if (isset($_POST["DescriptM"]) and !empty($_POST["DescriptM"])){

    $descriptm = trim($_POST["DescriptM"]);
    echo "<p class=\"abs\">Eine Description wurde übergeben.</p>\n";
    $descriptm = preg_replace("/[^a-zA-ZäöüÄÖÜß0-9,._-]/"," ",$descriptm);
    }
    else {echo "<p class=\"abs\">Es wurde keine Description übergeben.</p>\n";

    $descriptm = "-";
}

if (isset($_POST["KeywordsM"]) and !empty($_POST["KeywordsM"])){

    $keywordsm = trim($_POST["KeywordsM"]);
    echo "<p class=\"abs\">Keywords wurden übergeben.</p>\n";
    $keywordsm = preg_replace("/[^a-zA-ZäöüÄÖÜß0-9,_-]/"," ",$keywordsm);
    }
    else {echo "<p class=\"abs\">Es wurde keine Keywords übergeben.</p>\n";

    $keywordsm = "-";
}

if (isset($_POST["DateiName"]) and !empty($_POST["DateiName"])){

    $dateiname = trim($_POST["DateiName"]);
    $dateiname = preg_replace("/[^a-zA-Z0-9._-]/","",$dateiname);
    }
    else {echo "<p class=\"abs\">Fehler, es wurde kein Name für die Datei übergeben!<br>".
    "Die Datei wird unter dem Dateinamen \"namenlos.txt\" abgespeichert.</p>\n";

    $dateiname = "namenlos.txt";
}

/*-------------------------------------------------------------
 $quelltext lässt sich nicht mit htmlspecialchars() absichern.
 --------------------------------------------------------------
*/

    $speichern = "<!DOCTYPE html>\n<html>\n\n".
    "<head>\n".
    "<title>".htmlspecialchars($titeldsm, ENT_QUOTES)."</title>\n".
    "<meta charset=\"windows-1252\">\n".
    "<meta name=\"description\" content=\"".htmlspecialchars($descriptm, ENT_QUOTES)."\">\n".
    "<meta name=\"keywords\" content=\"".htmlspecialchars($keywordsm, ENT_QUOTES)."\">\n".
    "</head>\n\n".
    "<body>\n".$quelltext."\n</body>\n".
    "</html>\n";

    file_put_contents($dateiname, $speichern);

?>
</body>
</html>

Unabhängig davon, ob die Speicherung der Inhalte als HTML-Seiten erfolgt oder die im Wysiwyg bearbeiteten Inhalte als Hypertext in einer Datenbank abgelegt werden, eine Schwachstelle bleibt in beiden Fällen gleich. Alle eingehenden Werte lassen sich mit der PHP Funktion preg_replace() filtern und mit den Funktionen htmlspecialchars(), htmlentities() oder strip_tags() gegen die Einschleusung von Schadcode zusätzlich absichern, nur der eigentliche Quelltext kaum.
Eigentlich verhält es sich bei allen der Bearbeitung von HTML-Seiten dienenden Editoren so. Nur wer einen HTML-Editor auf seinem Computer installiert hat, wird ihm völlig unbekannte Personen nicht in die Wohnung und unbeaufsichtigt an seinem Computer werkeln lassen. Bei einem Online-Editor wird diese Vorsichtsmaßnahme zuweilen vergessen.

Eine Möglichkeit den Quelltext abzusichern, bestünde in der Anlage einer Whitelist mit erlaubten HTML-Tags und HTML-Elementen. Die in der Whitelist enthaltenen Tags und Elemente können dann als Vorlage für reguläre Ausdrücke genutzt werden. Auf diese Art und Weise könnte dann eine serverseitige Überprüfung mit preg_replace() erfolgen. Einfacher ist es hingegen, nur ausgewählten Co-Autoren den Zutritt zu gewähren.

weiterlesen » Farbpalette

Navigation

Finden und
gefunden werden ...

Planung von Websites
und Webprojekten

- Optimierung -

Einstieg Optimierung

Erfolg oder Misserfolg

Webcoding

Übersicht

Einführung ins Thema

Web Services

Web Services

Tutorials &
diverse Listings

Navigationshilfe

und vieles mehr...