Add save/load functionality

index.php

@@ -169,6 +169,10 @@ function runCode($__source_code, $__bootstrap_file)
                                 </object>
                             </span>
                             <a href="" class="reset">Reset</a>
+                            <input type="text" name="inputFileName" id="inputFileNameToSaveAs" class="ls-input" value="<?php echo (isset($_POST['inputFileName']) ? htmlentities($_POST['inputFileName'], ENT_QUOTES, 'UTF-8') : "console-".date("Y-m-d_H:i:s").".php")?>">
+                            <a href="#" class="save">Save</a>
+                            <input type="file" id="fileToLoad" class="ls-input">
+                            <a href="#" class="load">Load</a>
                             <span class="runtime-info"></span>
                         </div>
                     <input type="submit" name="subm" value="Try this!" />
@@ -203,4 +207,4 @@ function runCode($__source_code, $__bootstrap_file)
             </div>
         </div>
     </body>
-</html>
+</html>

php-console.js

@@ -181,6 +181,41 @@
                 e.preventDefault();
             });
         }
+
+        //Save
+        // Load and Save functions copied from:
+        // https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/
+
+        $('.statusbar .save').on('click', function (e) {
+        	var textToWrite = editor.getSession().getValue();
+        	var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
+        	var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
+        	var downloadLink = document.createElement("a");
+        	downloadLink.download = fileNameToSaveAs;
+        	downloadLink.innerHTML = "Download File";
+    		downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
+    		downloadLink.style.display = "none";
+    		document.body.appendChild(downloadLink);
+        	}
+
+        	downloadLink.click();
+        });
+
+
+        //Load
+        $('.statusbar .load').on('click', function (e) {
+        	var fileToLoad = document.getElementById("fileToLoad").files[0];
+
+        	var fileReader = new FileReader();
+        	fileReader.onload = function(fileLoadedEvent) 
+        	{
+        		var textFromFileLoaded = fileLoadedEvent.target.result;
+        		editor.getSession().setValue(textFromFileLoaded);
+        		localStorage.setItem('phpCode',textFromFileLoaded);
+        	};
+        	fileReader.readAsText(fileToLoad, "UTF-8");
+        });
+
 
         // commands
         editor.commands.addCommand({

styles.css

@@ -31,6 +31,13 @@ input {
     font-size: 2em;
 }
 
+.ls-input {
+	width: auto;
+	display: inline;
+	margin: 0px auto;
+	font-size: 10px;
+}
+
 a {
     color: #88f;
 }
@@ -149,4 +156,4 @@ a {
     float: right;
     clear: right;
     width: 350px;
-}
+}