Lösungen ,mini editor

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&emsp;
 <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="&#10149;" 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>&laquo; <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">&#128442;</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>&#128442; 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>&#9998; 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>&bull; Einfügen<br><input type="button" value="&#127986; HTML" title="HTML-Tag - Einfügen&#10;1. Einen Text im Inhalt markieren (Optional)&#10;&#32;&#32;&#32;&#32;Oder den Cursor an eine gewünschte Position setzen.&#10;2. [HTML] Button drücken.&#10;3. Buchstaben eingeben und [OK] drücken.&#10;&#10;HTML-Tag - Entfernen&#10;1. Einen Text im Inhalt markieren&#10;2. [HTML] Button drücken.&#10;3. [Abbrechen] drücken." onClick="htmInsert()"> 
    <input type="button" value="&#128444; Bild" onClick="insertPic()" title="Bild einfügen">
    <input type="button" value="&#128279; Link" onClick="insertLink()" title="Link einfügen">
    <input type="button" value="&#128467; Datum" onClick="insertDate()" title="Datum einfügen">
    <input type="button" value="&#9684; Uhr" onClick="insertTime()" title="Uhrzeit einfügen">
  </p>
  <p>&bull; 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">&#128427; Speichern</label>&emsp; 
 <input type="radio" name="option" value="loeschen" id="loeschen" required="required"> <label for="loeschen" id="delete" title="Datei löschen">&#128465; Löschen</label>&emsp; <wbr>
 <nobr><input type="radio" name="option" value="hochladen" id="hochladen" required="required"> <label for="hochladen" title="Datei hochladen">&#128471; Hochladen:
 <input type="file" name="datei" accept="text/html"><!-- text/html, text/css, text/php --></label></nobr>
</p>

<p>
 <label>&#9919; Passwort: <input type="password" name="passwort" size="18" required="required"></label>
 <input type="hidden" name="neu" value="<?=$neu?>"> &emsp;
 <input type="submit" value="&#10004; 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">&#128442;</a> <a href="?datei=' .
   basename($datei) . '&amp;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">&#128449; "<code>' . $verzeichnis . '</code>"&emsp;'
  . count($dateien) . (count($dateien) == 1 ? ' Datei' : ' Dateien') . '&emsp;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%">&#128442;</th>' .
  '<th title="Dateigröße" width="15%">&#13189;</th><th title="Letzte Änderung" >&#9684;</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>