mini-editor-txt-bearbeiten-und-speichern.php
Quell Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Editor</title>
<style>
body {
background-color: #F5F5F5;
margin: 1.5rem 0 10rem 1.5rem;
cursor: Default;
}
body, input, textarea {
font-family: Verdana, Arial, Sans-Serif;
font-size: 1rem;
}
a:link, a:visited {
color: #4169E1;
text-decoration: None;
}
h2 {
font-weight: Normal;
}
p.ok {
color: #00C100;
}
p.ko {
color: #EE0000;
}
table#tabelle {
width: 95%;
}
table#tabelle th, table#tabelle td {
padding: 0.20rem;
font-weight: Normal;
}
table#tabelle tr:nth-child(even) {
background-color: #DCDCDC;
white-space: Nowrap;
}
table#tabelle tr:nth-child(odd) {
background-color: #FFFFFF;
white-space: Nowrap;
}
table#tabelle tr:hover {
background-color: #EEF7FD;
box-shadow: Inset 0px 0px 10px 100px #E5F1FB;
}
table#tabelle td:hover {
background-color: #D1E7FA;
}
input[type=radio]:checked + label {
color: Royalblue;
}
input[type=radio]:checked + label#delete {
color: #FF0000;
}
textarea {
width: 95%;
min-width: 450px;
height: 450px;
min-height: 200px;
resize: Both;
}
input[type="text"],
input[type="search"],
input[type="password"],
textarea {
transition: box-shadow 0.30s ease-in-out;
outline: none;
padding: 3px;
border: 1px solid #DDDDDD;
caret-color: #FF0000;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus {
box-shadow: 0 0 4px rgb(149, 171, 238);
border: 1px solid rgb(149, 171, 238);
}
span#zeichen {
font-family: Arial, Sans-Serif;
font-size: 0.75rem;
display: Inline-Block;
margin-left: 150px;
}
details {
width: 95%;
background-color: #F0F0F0;
padding: 5px;
}
details > summary {
background-color: #e4e4e4;
}
#fontsize {
vertical-align: Middle;
width: 300px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function () {
if (window.localStorage.getItem("edFontsize")) {
document.getElementById("fontsize").value = window.localStorage.getItem("edFontsize");
document.getElementById("inhalt1").style.fontSize = window.localStorage.getItem("edFontsize") + "px";
document.getElementById("size").innerText = window.localStorage.getItem("edFontsize");
document.getElementById("color").value = window.localStorage.getItem("edColor");
document.getElementById("inhalt1").style.color = window.localStorage.getItem("edColor");
document.getElementById("fontfamily").selectedIndex = window.localStorage.getItem("edFontfamily");
document.getElementById("inhalt1").style.fontFamily = window.localStorage.getItem("edFontfamily");
}
counter();
});
function counter() {
var str = document.getElementById("inhalt1").value;
var zeilen = 0;
var pos = 0;
while (pos !== -1) {
zeilen++;
pos = str.indexOf("\n", pos + 1);
}
var wort = str.split(" ");
document.getElementById("zeichen").innerText = zeilen + " / " + wort.length + " / " + (str.length + 1);
}
function fontSize(wert) {
document.getElementById("inhalt1").style.fontSize = wert + "px";
document.getElementById("size").innerText = wert;
saveStatus();
}
function fontColor(wert) {
document.getElementById("inhalt1").style.color = wert;
saveStatus();
}
function fontFamily(wert) {
document.getElementById("inhalt1").style.fontFamily = wert;
saveStatus();
}
function saveStatus() {
window.localStorage.setItem("edFontsize", document.getElementById("fontsize").value);
window.localStorage.setItem("edColor", document.getElementById("color").value);
window.localStorage.setItem("edFontfamily", document.getElementById("fontfamily").selectedIndex);
}
// HTML-Tags einfügen
function htmInsert() {
var markiere = "";
var field = document.getElementById("inhalt1");
if (document.getSelection) {
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var sel = field.value.substring(startPos, endPos);
if (sel.length > 150) {
var sel = field.value.substring(startPos, 150);
}
}
if (sel != "") {
markiere = "MARKIERT:\n|" + sel + "|\n\n";
}
var bb = prompt(markiere + `HTML-Tags einfügen:
b, i, s, q, mark, code, span, \np, h1, h2, h3, h4, h5, \nsub, sup, ol, li, ul\n
Klicke zum einfügen auf den Button: [OK]\noder zum beenden auf den Button: [Abbrechen]\n\n`,"b");
if (bb !== null && bb != "") {
if (document.getSelection) {
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var txt = field.value.substring(startPos, endPos);
var os = bb;
if (os == "span") {
os+= ' style="color: red"';
}
if (os == "mark") {
os+= ' style="background-color: yellow"';
}
if (txt != "") {
var cp = "<" + os + ">" + txt + "</" + bb + ">";
field.value = field.value.substring(0, startPos) + cp +
field.value.substring(endPos, field.length);
setCursor(field, startPos + cp.length);
}
else {
var cp = "<" + os + "></" + bb + "> ";
field.value = field.value.substring(0, startPos) + cp +
field.value.substring(endPos, field.length);
setCursor(field, startPos + (os.length + 2));
}
}
}
else {
// HTML-Tags entfernen
if (sel) {
var entf = sel.replace(/\<[^\>]+\>/g, '');
field.value = field.value.substring(0, startPos) + entf +
field.value.substring(endPos, field.length);
setCursor(field, startPos);
if (entf.length != sel.length) {
alert("Der markierte HTML-Code wurde entfernt.");
}
}
}
}
// Bild einfügen
function insertPic() {
var bild = prompt("Bild Einfügen\nDateiname (+ rel. Pfad oder URL):", "bild.jpg");
if (bild != "" &&
bild != null) {
bild = '<img src="' + bild + '">';
var field = document.getElementById("inhalt1");
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.value = field.value.substring(0, startPos) + bild +
field.value.substring(endPos, field.length);
setCursor(field, startPos + (bild.length));
}
}
// Link einfügen
function insertLink() {
var alink = prompt("Link Einfügen\nDateiname (+ rel. Pfad oder URL):", "datei.htm");
if (alink != "" &&
alink != null) {
alink = '<a href="' + alink + '">' + alink + '</a>';
var field = document.getElementById("inhalt1");
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.value = field.value.substring(0, startPos) + alink +
field.value.substring(endPos, field.length);
setCursor(field, startPos + (alink.length));
}
}
// Datum einfügen
function insertDate() {
let Heute = new Date();
let Tag = Heute.getDate();
let Monat = Heute.getMonth()+1;
let Jahr = Heute.getFullYear();
let datum = Tag + "." + Monat + "." + Jahr;
var field = document.getElementById("inhalt1");
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.value = field.value.substring(0, startPos) + datum +
field.value.substring(endPos, field.length);
setCursor(field, startPos + (datum.length));
}
// Uhrzeit einfügen
function insertTime() {
let Heute = new Date();
let Stunde = Heute.getHours();
let Minute = Heute.getMinutes();
let zeit = Stunde + ":" + Minute + " Uhr";
var field = document.getElementById("inhalt1");
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.value = field.value.substring(0, startPos) + zeit +
field.value.substring(endPos, field.length);
setCursor(field, startPos + (zeit.length));
}
// Cursor setzen
function setCursor(elem, pos) {
if (elem.setSelectionRange) {
elem.focus();
elem.setSelectionRange(pos, pos);
}
else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
</script>
</head>
<body>
<form action="<?=basename($_SERVER['SCRIPT_NAME'])?>" method="get">
<h2> Editor 
<input type="search" name="suchbegriff" size="35" value="<?=isset($_GET['suchbegriff']) ? $_GET['suchbegriff'] : '';?>" placeholder="Suche nach Dateiname oder Inhalt" required="required">
<input type="submit" value="➥" title="Suche starten">
</h2>
</form>
<?php
// Passwort
$passwort = "0000";
// Verzeichnis
$verzeichnis = "./"; // Verzeichnis mit / am Ende!
// Die Dateiendung der Dateien die mit
// diesem Formular bearbeitet werden kann.
$dateiendung = "txt"; // Ohne Punkt!
// Pagination - Anzahl der Dateien pro Seite
$eintraege = 3; // 10
// Zeitzone setzen (siehe: http://php.net/manual/de/timezones.europe.php)
date_default_timezone_set("Europe/Berlin");
// Link Zurück
$zurueck = '<br>« <a href="javascript:history.back();">Zurück</a>';
// PHP-Fehlermeldungen anzeigen (0/E_ALL)
error_reporting(E_ALL); // E_ALL
// Aktuelle Seite ermitteln
$seite = ((isset($_GET["seite"])) ? abs(intval($_GET["seite"])) : 0);
// Suche
$ergebnisse = [];
if (isset($_GET["suchbegriff"])) {
$dateien = array_slice(scanDir($verzeichnis), 2);
foreach ($dateien as $datei) {
$dinfo = pathinfo($datei);
// print_r($dinfo);
if (isset($dinfo['extension']) == $dateiendung) {
$text = file_get_contents($verzeichnis . $datei);
if (mb_stristr($datei, $_GET["suchbegriff"]) or
mb_stristr($text, $_GET["suchbegriff"])) {
array_push($ergebnisse, '<a href="' . $verzeichnis . basename($datei) . '" target="_blank" title="Datei direkt aufrufen">🖺</a> <a href="?datei=' .
basename($datei) . '" title="Datei editieren">' . basename($datei) . '</a>');
}
}
}
if (count($ergebnisse) > 0) {
echo '<p class="ok">Suchergebnisse: ' . count($ergebnisse) . '</p>' .
'<ol>';
foreach ($ergebnisse as $ergebnis) {
echo '<li>' . $ergebnis . '</li>';
}
echo '</ol>';
}
else {
echo '<p class="ko">Keine Suchergebnisse!</p>';
}
}
// Wurden Daten über POST gesendet
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Passwort überprüfen
if ($_POST["passwort"] === $passwort) {
// Datei speichern
if ($_POST["option"] == "speichern") {
if (!empty($_POST["dateiname"]) &&
!empty($_POST["inhalt"])) {
$dateiname = $_POST["dateiname"];
// Existiert eine Datei mit gleichem Namen
if (!file_exists($verzeichnis . $dateiname . '.' . $dateiendung)) {
// Dateiname korrigieren
$dateiname = trim(mb_strtolower($dateiname, 'UTF-8')); // In Kleinbuchstaben umwandeln (unter Berücksichtigung von UTF-8)
$dateiname = strtr($dateiname, [" "=>"_", "ä"=>"ae", "ö"=>"oe", "ü"=>"ue", "ß"=>"ss"]); // Leerzeichen und Umlaute ersetzen
$dateiname = preg_replace("/[^a-z0-9_-]/", "", $dateiname); // Alles Zeichen außer Buchstaben, Zahlen Unterstrich und Bindestrich entfernen
$dateiname = ($dateiname == '') ? 'unbenannt' : $dateiname; // Wenn der Dateiname keinen Namen hat, auf 'unbenannt' setzen
}
else if ($_POST["neu"] == 'ja') {
exit('<p class="ko">Die Datei "' . $dateiname . '.' . $dateiendung . '" ist bereits vorhanden!' . $zurueck . '</p>');
}
// Speichern
if (file_put_contents($verzeichnis . $dateiname . '.' . $dateiendung, $_POST["inhalt"])) {
echo '<p class="ok">Die Datei "' . $dateiname . '.' . $dateiendung . '" wurde erfolgreich gespeichert.</p>';
}
else {
echo '<p class="ko">Beim speichern der Datei "' . $dateiname . '.' . $dateiendung . '" ist ein Fehler aufgetreten (Schreibrechte überprüfen)!' . $zurueck . '</p>';
}
}
else {
echo '<p class="ko">Es wurden nicht alle Formularfelder korrekt ausgefüllt!' . $zurueck . '</p>';
}
}
// Datei Löschen
if ($_POST["option"] == "loeschen") {
if (!empty($_POST["dateiname"])) {
if (file_exists($verzeichnis . $_POST["dateiname"] . '.' . $dateiendung)) {
// Löschen
if (unlink($verzeichnis . $_POST["dateiname"] . '.' . $dateiendung)) {
echo '<p class="ok">Die Datei "' . $_POST["dateiname"] . '.' . $dateiendung . '" wurde erfolgreich gelöscht.</p>';
}
else {
echo '<p class="ko">Die Datei "' . $_POST["dateiname"] . '.' . $dateiendung . '" konnte nicht gelöscht werden (Schreibrechte überprüfen)!' . $zurueck . '</p>';
}
}
}
else {
echo '<p class="ko">Der Dateiname fehlt!' . $zurueck . '</p>';
}
}
// Datei hochladen
if ($_POST["option"] == "hochladen") {
// Wurde eine Datei ausgewählt
if ($_FILES["datei"]["name"] != "" &&
$_FILES["datei"]["error"] === UPLOAD_ERR_OK) {
// Den Dateinamen ermitteln
$dinfo = pathinfo($_FILES["datei"]["name"]);
$dateiname = $dinfo['filename'];
// Dateiendung vergleichen
if ($dinfo['extension'] == $dateiendung) {
// Dateiname korrigieren
$dateiname = trim(mb_strtolower($dateiname, 'UTF-8'));
$dateiname = strtr($dateiname, [" "=>"_", "ä"=>"ae", "ö"=>"oe", "ü"=>"ue", "ß"=>"ss"]);
$dateiname = preg_replace("/[^a-z0-9_-]/", "", $dateiname);
$dateiname = ($dateiname == '') ? 'unbenannt' : $dateiname;
// Existiert eine Datei mit gleichem Namen
if (!file_exists($verzeichnis . "/" . $dateiname . "." . $dateiendung)) {
// Datei verschieben
if (move_uploaded_file($_FILES["datei"]["tmp_name"], $verzeichnis . "/" . $dateiname . "." . $dateiendung)) {
echo '<p class="ok">Die Datei "' . $dateiname . '.' . $dateiendung . '" wurde erfolgreich hochgeladen.</p>';
}
else {
echo '<p class="ko">Fehler beim verschieben der Datei!' . $zurueck . '</p>';
}
}
else {
echo '<p class="ko">Die Datei "' . $dateiname . '.' . $dateiendung . '" ist bereits vorhanden!' . $zurueck . '</p>';
}
}
else {
echo '<p class="ko">Dieses Dateiformat wird nicht unterstützt (nur: <i>.' . $dateiendung . '</i>-Formate)!' . $zurueck . '</p>';
}
}
else {
echo '<p class="ko">Beim hochladen ist ein Fehler aufgetreten!' . $zurueck . '</p>';
}
}
}
else {
echo '<p class="ko">Das Passwort ist fehlerhaft!' . $zurueck . '</p>';
}
}
// Datei zum bearbeiten auslesen
if (isset($_GET["datei"])) {
$dateiname = basename($_GET["datei"]);
if (file_exists($verzeichnis . $dateiname)) {
// Leserechte überprüfen
if (is_readable($verzeichnis . $dateiname)) {
$neu = "nein";
// Den Dateinamen ermitteln
$dinfo = pathinfo($_GET["datei"]);
$dateiname = $dinfo['filename'];
// Die Dateiendung überprüfen
if ($dinfo['extension'] == $dateiendung) {
// Den Inhalt auslesen
$inhalt = file_get_contents($verzeichnis . $_GET["datei"]);
}
}
else {
echo '<p class="ko">Die Datei "' . $_GET["datei"] . '" besitzt keine Leserechte!' . $zurueck . '</p>';
}
}
}
// Neue Datei
else {
$neu = "ja";
$dateiname = "";
$inhalt = "";
}
?>
<form action="<?=basename($_SERVER['SCRIPT_NAME']) . '?seite=' . $seite?>" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
<p>
<label>🖺 Dateiname:
<input type="text" size="34" name="dateiname" value="<?=$dateiname?>" pattern="^[a-z0-9-_]{1,100}$"
title="Der Dateiname darf nur aus: Kleinbuchstaben, Zahlen, Bindestrich oder Unterstrich bestehen (keine Umlaute, Leerzeichen oder Sonderzeichen)!"></label>
.<?=$dateiendung?>
</p>
<p>
<label>✎ Inhalt: <span id="zeichen" title="Zeilen / Wörter / Zeichen">></span><br>
<textarea name="inhalt" id="inhalt1" rows="12" cols="50" spellcheck="true" onInput="counter()"><?=$inhalt?></textarea>
</label>
</p>
<details>
<summary>Optionen</summary>
<p>• Einfügen<br><input type="button" value="🏲 HTML" title="HTML-Tag - Einfügen 1. Einen Text im Inhalt markieren (Optional)     Oder den Cursor an eine gewünschte Position setzen. 2. [HTML] Button drücken. 3. Buchstaben eingeben und [OK] drücken. HTML-Tag - Entfernen 1. Einen Text im Inhalt markieren 2. [HTML] Button drücken. 3. [Abbrechen] drücken." onClick="htmInsert()">
<input type="button" value="🖼 Bild" onClick="insertPic()" title="Bild einfügen">
<input type="button" value="🔗 Link" onClick="insertLink()" title="Link einfügen">
<input type="button" value="🗓 Datum" onClick="insertDate()" title="Datum einfügen">
<input type="button" value="◔ Uhr" onClick="insertTime()" title="Uhrzeit einfügen">
</p>
<p>• Editor<br>Schriftgröße: <input type="range" id="fontsize" value="16" min="12" max="28" title="16" oninput="fontSize(this.value)"> <span id="size">16</span></p>
<p><label>Farbe: <input type="color" value="#000000" id="color" oninput="fontColor(this.value)"></label>
<label>Schriftart: <select id="fontfamily" size="1" onChange="fontFamily(this.value)">
<option value="verdana">Verdana</option>
<option value="arial">Arial</option>
<option value="tahoma">Tahoma</option>
</select></label>
</p>
</details>
<p>
<input type="radio" name="option" value="speichern" id="speichern" checked="checked"> <label for="speichern" title="Datei speichern">🖫 Speichern</label> 
<input type="radio" name="option" value="loeschen" id="loeschen" required="required"> <label for="loeschen" id="delete" title="Datei löschen">🗑 Löschen</label>  <wbr>
<nobr><input type="radio" name="option" value="hochladen" id="hochladen" required="required"> <label for="hochladen" title="Datei hochladen">🗗 Hochladen:
<input type="file" name="datei" accept="text/html"><!-- text/html, text/css, text/php --></label></nobr>
</p>
<p>
<label>⚿ Passwort: <input type="password" name="passwort" size="18" required="required"></label>
<input type="hidden" name="neu" value="<?=$neu?>">  
<input type="submit" value="✔ Ausführen" title="Ausgewählte Option ausführen">
</p>
</form>
<?php
// Verzeichnis auslesen
if (is_dir($verzeichnis)) {
$dateien = glob($verzeichnis . "*." . $dateiendung);
// Dateien mit einem Link verknüpfen
$ausgabe = [];
foreach ($dateien as $datei) {
$ausgabe[] = '<tr><td><a href="' . $verzeichnis . basename($datei) . '" target="_blank" title="Datei direkt aufrufen">🖺</a> <a href="?datei=' .
basename($datei) . '&seite=' . $seite . '" title="Datei editieren">' . basename($datei) . '</a></td><td><small>' .
// Dateigröße ermitteln
number_format((filesize($datei) / 1024), 2, ",", ".") . ' KB</small></td><td><small>' .
// Letzte Änderung ermitteln
date("d.m.Y - H:i", fileMtime($datei)) . ' Uhr</small></td></tr>';
}
// Seitennavigation
$nr = 1;
echo '<table id="tabelle"><tr><td colspan="3">🗁 "<code>' . $verzeichnis . '</code>" '
. count($dateien) . (count($dateien) == 1 ? ' Datei' : ' Dateien') . ' Seite: ';
for ($zaehler = 0; $zaehler < count($ausgabe); $zaehler = $zaehler + $eintraege) {
echo (($zaehler == $seite) ? ' <strong>' . $nr . '</strong>' :
' <a href="?seite=' . $zaehler . '" title="Seite ' . $nr . ' anzeigen">' . $nr . '</a>');
$nr++;
}
// Dateien ausgeben
echo '</td></tr><tr><th title="Dateiname" width="70%">🖺</th>' .
'<th title="Dateigröße" width="15%">㎅</th><th title="Letzte Änderung" >◔</th></tr>';
for ($zaehler = $seite; $zaehler < ($seite + $eintraege); $zaehler++) {
if (isset($ausgabe[$zaehler])) {
echo $ausgabe[$zaehler];
}
}
echo '</table>';
}
else {
echo '<p class="ko">Das Verzeichnis "' . $verzeichnis . '" ist nicht vorhanden!</p>';
}
?>
</body>
</html>