Web Editor

Prof. Joerg Vollrath, 5.1.2022
JavaScript, NodeJS, php

Edit Files on a Server


HTML 5 gives editable content.
<div contenteditable="true" class="over">
  This text can be edited by the user.
</div>

Example:
PHP:

Commands:


Header 2


This text can be edited by the user.
Arduino

HTML code can be inserted directly (Activate HTML) or via the text field (Insert).


Resources:



Editor commands:


Toggle between HTML and WYSISWYG.
Insert HTML elements

PHP files

Delete.php

<?php 
 
$filename = $_GET['Typ'];

// the following line prevents the browser from parsing this as HTML.
header('Content-Type: text/plain');

if ( file_exists(__DIR__ . DIRECTORY_SEPARATOR . "txt" . DIRECTORY_SEPARATOR . $filename) ) {
	unlink( __DIR__ . DIRECTORY_SEPARATOR . "txt" . DIRECTORY_SEPARATOR . $filename); 
	echo "File $filename deleted $res"; 
} else {
	echo "File $filename does not exist"; 
}
?>
Dir.php

<?php 
 
// Folder where you want to get all files names from
$dir = "txt/";

/* Hide this */
$hideName = array('.','..','.DS_Store');    

// Sort in ascending order - this is default
$files = scandir($dir);
/* While this to there no more files are */
foreach($files as $filename) {
    if(!in_array($filename, $hideName)){
       /* echo the name of the files */
       echo "$filename
";
    }
}
?>
Read.php

<?php 

$filename = $_GET['Typ'];

// the following line prevents the browser from parsing this as HTML.
header('Content-Type: text/plain');

// get the file contents, assuming the file to be readable (and exist)
$contents = file_get_contents($filename.".txt");

// echo "x".$filename.".txtx\n";
echo $contents."\n";

?>
SavePOST.php

Save files with parameters Typ, Time and TextX in subdirectory txt with extension .txt.

Javascript in a subdirectory: 
 var xmlHttpObjectLog = new XMLHttpRequest();

    function handleStateChangeLogX()
    {
		if  (xmlHttpObjectLog.readyState >= 3) {
          stText = xmlHttpObjectLog.responseText;
		  document.getElementById("result").innerHTML = stText;
		}
    }

  trequest = "Typ=" + typ + "&Time=" + tstring 
             + "&TextX=JSON" + JSON.stringify(editor.value);
  xmlHttpObjectLog.open("POST","../php/SavePOST.php",false);    // send to server
  xmlHttpObjectLog.onreadystatechange = handleStateChangeLogX;
  xmlHttpObjectLog.send(trequest);
PHP code in subdirectory /php

<?php 

// $somecontent=$_POST['TextX'];

$post = file_get_contents('php://input'); // Gesamter String

$t1 = strpos($post,"Typ",0);  // Typ 
$t2 = strpos($post,"Time",0);  // Typ 
$t3 = strpos($post,"TextX",0);  // Typ 

$filename = substr($post, $t1 + 4, $t2 - $t1 - 5);
$fileX = substr($post, $t2 + 5, $t3 - $t2 - 6);
$somecontent = substr($post, $t3 + 6);

// unlink( __DIR__ . DIRECTORY_SEPARATOR . "videos" . DIRECTORY_SEPARATOR . "Test.txt"); 

// (C) UPLOAD DESTINATION
// ! CHANGE FOLDER IF REQUIRED !
$filePath = __DIR__ . DIRECTORY_SEPARATOR . "txt";

if (!file_exists($filePath)) { 
  if (!mkdir($filePath, 0777, true)) {
    verbose(0, "Failed to create $filePath");
  }
}

 $filePath = $filePath . DIRECTORY_SEPARATOR . $filename;
 rename($filePath . ".txt", $filePath . $fileX . ".txt");
 
 $out = fopen($filePath . ".txt","w");
 fwrite($out, $somecontent);
 fclose($out);
 
 echo "Filepath $filePath.txt Content $somecontent"; 

?>

Edit Files on a Client



To Do:

Work done