I do a lot of work with a Chromebook, which is designed for working online. In a previous post I described a HTML editor that I wrote, which I have uploaded to a website I maintain to allow me to test web pages.
The editor allows me to preview the page design, but not to run any scripts. For that, PHP is needed. I could have added some PHP code and necessary controls and renamed the file, but it was already a very busy file and I could no longer use it offline.
Therefore, I decided to create a new PHP file and link to it from the editor.
My previous post described a PHP file to preview HTML pages, permitting the testing of scripts. This is an extension of that file.
Here is the code:
<html xmlns=’http://www.w3.org/1999/xhtml’>
<head profile=’http://gmpg.org/xfn/11′>
<title>Enter Title Here</title>
<style type=’text/css’>
body {margin-left:0;margin-right:0;font:normal normal normal 12px Arial; white-space: pre-wrap}
a{ text-decoration: }
:link { color: rgb(0, 0, 255) }
:visited {color :rgb(100, 0,100) }
:hover { }
:active {}
#ta1{ font-size: 18px}
</style>
</head>
<body>
<?php
$data = ‘<html>
<span style=”font-size: 24px”>This is a test</span>
</html>’;
$name = “SaveName”;
if (isset($_POST[‘hidden’]) ) {
$name = $_POST[‘save’];
$newdata = $_POST[‘ta1’];
if ($_POST[‘s2’] == “Preview”) {
$fw = fopen(“tmp.php”, ‘w’) or die(‘Could not open file!’);
$success = fwrite($fw,$newdata) or die(‘Could not write to file’);
fclose($fw);
header( ‘Location: tmp.php’ );
}
if ($_POST[‘s2’] == “Save” || $_POST[‘s2’] == “Download” || $_POST[‘s2’] == “Delete Online”) {
$fw = fopen($name, ‘w’) or die(‘Could not open file!’);
$success = fwrite($fw,$newdata) or die(‘Could not write to file’);
fclose($fw);
if ($_POST[‘s2’] == “Save”) {
header( ‘Location:’ . $name );
} else if ($_POST[‘s2’] == “Download”) {
echo ‘<a href= “‘ . $name . ‘” download= “‘ . $name . ‘” >Download</a>’;
} else if ($_POST[‘s2’] == “Delete Online”) {
unlink($name);
}
}
}
?>
<form action=”viewsave.php” method=”post” enctype=”multipart/form-data”>
<input type=”hidden” name=”hidden” value=”hidden” /><br />
<p><select id = “s2” name = “s2″ style=”font-size: 12pt”>
<option></option>
<option>Preview</option>
<option>Save</option>
<option>Download</option>
<option>Delete Online</option>
</select> <input type=”text” id=”save” name=”save” value=<?php echo $name; ?> /> <input type=”submit” value=”Submit” /></p>
<p><textarea id=”ta1″ name=”ta1″ rows=”24″ cols=”120″><?php echo $data; ?></textarea><p>
</form>
</body></html>
The interface has some additions to the select box:
Click Image for larger view
w
as well as a text input for the save name:
Click Image for larger view
The code is first copied into the textarea and then either previewed, saved online or downloaded to the computer.
The desired option is chosen and then submitted.
The preview has already been discussed.
Here is the code for saving online:
$name = $_POST[‘save’];
if ($_POST[‘s2’] == “Save” || $_POST[‘s2’] == “Download” || $_POST[‘s2’] == “Delete Online”) {
$fw = fopen($name, ‘w’) or die(‘Could not open file!’);
$success = fwrite($fw,$newdata) or die(‘Could not write to file’);
fclose($fw);
if ($_POST[‘s2’] == “Save”) {
header( ‘Location:’ . $name );
}
After saving under the new name, the file is viewed.
Here is the code for downloading:
else if ($_POST[‘s2’] == “Download”) {
echo ‘<a href= “‘ . $name . ‘” download= “‘ . $name . ‘” >Download</a>’;
}
A link called Download is created and when clicked, downloads to the default location.
In order to download, an online file had to be created. If desired, the online file can be deleted:
else if ($_POST[‘s2’] == “Delete Online”) {
unlink($name);
}
The HTML editor already had the ability to save in localStorage, so it could be recalled for later modification. Some extra code had to added to it to
shell the PHP file:
function sve() {
var sv = prompt(“Save as File or Save as Storage”, “File”);
if (sv == “File”) {
var win=window.open(“viewsave.php”, “_blank”);
win.focus();
} else {
var key = prompt(“save name”);
localStorage.setItem(key, document.getElementById(“view1”).innerHTML);
}
}
Tips & Tricks 