Daniel Harrin Daniel Harrin - 7 months ago 7
HTML Question

Open and save textarea form in javascript generated document - "old undefined" error

I have two pieces of code I want to merge. One is an online (live) HTML editor script that I made, and one is a load/save text area script that I found here.

Here are both pieces of code:

The first HTML Editor script:



<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var editboxHTML = '<html class="expand close">' + '<head>' + '<style type="text/css">' + '.expand { width: 100%; height:95%; }' + '.close { border: none; margin: 0px; padding: 0px; }' + 'html,body { overflow: hidden; }' + '.noborder {border: none !important; height: 100%;}' + '</style>' + '</head>' + '<body class="expand close">' + '<form class="expand close" name="f">' + '<textarea class="noborder expand close" name="ta" wrap="hard" spellcheck="false">qweqwe' + '</textarea>' + '</form>' + '</body>' + '</html>';
var defaultStuff = 'The top box is where you put your code.';
var extraStuff = '';
var old = '';

function init() {
$("#editbox").html(editboxHTML);
$("#editbox form[name='f'] [name='ta']").focus();
$("#editbox form[name='f'] [name='ta']").val(defaultStuff);
update();
}

function update() {
var textarea = $("#editbox form[name='f'] [name='ta']");
var d = $("#dynamicframe");
if (old != textarea.val()) {
old = textarea.val();
if (old != undefined) {
d.html(old);
if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, '')) {
d.append(extraStuff);
}
} else {
d.html("old undefined");
}
}
setTimeout("update()", 150);
}
$(document).ready(function() {
init()
});
</script>
<style>
.textbox {
border: none;
padding: 5px;
width: 99%;
height: 300px;
}
#dynamicframe {
border: 2px solid purple;
padding: 5px;
width: 99%;
height: 300px;
}
</style>
</head>

<body>
<div id="editbox" class="textbox"></div>
<div id="dynamicframe"></div>
</body>

</html>





The load/save text area script:



<html>

<body>

<table>
<tr>
<td>Text to Save:</td>
</tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave" style="width:512px;height:256px"></textarea>
</td>
</tr>
<tr>
<td>Filename to Save As:</td>
<td>
<input id="inputFileNameToSaveAs"></input>
</td>
<td>
<button onclick="saveTextAsFile()">Save Text to File</button>
</td>
</tr>
<tr>
<td>Select a File to Load:</td>
<td>
<input type="file" id="fileToLoad">
</td>
<td>
<button onclick="loadFileAsText()">Load Selected File</button>
<td>
</tr>
</table>

<script type='text/javascript'>
function saveTextAsFile() {
var textToWrite = document.getElementById("inputTextToSave").value;
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";
if (window.webkitURL != null) {
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
} else {
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}

downloadLink.click();
}

function destroyClickedElement(event) {
document.body.removeChild(event.target);
}

function loadFileAsText() {
var fileToLoad = document.getElementById("fileToLoad").files[0];

var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
</script>

</body>

</html>





What I want is to combine both, so that the text area in the HTML Editor can be saved to a file, and subsequently loaded with an html document as well.

I have tried doing this myself by inserting the load/save code into the variable
editboxHTML
, but it gives me a
old undefined
error in the bottom
div
container.

Could you help me merge these two scripts?

Answer

There is not so much you need to change:

  • In the load/save JS part, change the references to the text box value to your text box value:

    function saveTextAsFile() {
      //var textToWrite = document.getElementById("inputTextToSave").value;
      var textToWrite = $("#editbox form[name='f'] [name='ta']").val();
    

    and:

    function loadFileAsText() {
        ...
        //document.getElementById("inputTextToSave").value = textFromFileLoaded;
        $("#editbox form[name='f'] [name='ta']").val(textFromFileLoaded);
    
  • In the load/save HTML part, remove the first table row, which has a text box you don't need

That's essentially it.

Here is a working fiddle.

Here is the merged code:

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    var editboxHTML = '<html class="expand close">' + '<head>' + '<style type="text/css">' + '.expand { width: 100%; height:95%; }' + '.close { border: none; margin: 0px; padding: 0px; }' + 'html,body { overflow: hidden; }' + '.noborder {border: none !important; height: 100%;}' + '</style>' + '</head>' + '<body class="expand close">' + '<form class="expand close" name="f">' + '<textarea class="noborder expand close" name="ta" wrap="hard" spellcheck="false">qweqwe' + '</textarea>' + '</form>' + '</body>' + '</html>';
    var defaultStuff = 'The top box is where you put your code.';
    var extraStuff = '';
    var old = '';

    function init() {
      $("#editbox").html(editboxHTML);
      $("#editbox form[name='f'] [name='ta']").focus();
      $("#editbox form[name='f'] [name='ta']").val(defaultStuff);
      update();
    }

    function update() {
      var textarea = $("#editbox form[name='f'] [name='ta']");
      var d = $("#dynamicframe");
      if (old != textarea.val()) {
        old = textarea.val();
        if (old != undefined) {
          d.html(old);
          if (old.replace(/[\r\n]/g, '') == defaultStuff.replace(/[\r\n]/g, '')) {
            d.append(extraStuff);
          }
        } else {
          d.html("old undefined");
        }
      }
      setTimeout("update()", 150);
    }
    $(document).ready(function() {
      init()
    });
  </script>
  <style>
    .textbox {
      border: none;
      padding: 5px;
      width: 99%;
      height: 300px;
    }
    #dynamicframe {
      border: 2px solid purple;
      padding: 5px;
      width: 99%;
      height: 300px;
    }
  </style>

  <script type='text/javascript'>
    function saveTextAsFile() {
      //var textToWrite = document.getElementById("inputTextToSave").value;
      var textToWrite = $("#editbox form[name='f'] [name='ta']").val();
      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";
      if (window.webkitURL != null) {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
      } else {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
      }

      downloadLink.click();
    }

    function destroyClickedElement(event) {
      document.body.removeChild(event.target);
    }

    function loadFileAsText() {
      var fileToLoad = document.getElementById("fileToLoad").files[0];

      var fileReader = new FileReader();
      fileReader.onload = function(fileLoadedEvent) {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        //document.getElementById("inputTextToSave").value = textFromFileLoaded;
        $("#editbox form[name='f'] [name='ta']").val(textFromFileLoaded);
      };
      fileReader.readAsText(fileToLoad, "UTF-8");
    }
  </script>  
</head>

<body>
  <table>
    <!-- removed first TR -->
    <tr>
      <td>Filename to Save As:</td>
      <td>
        <input id="inputFileNameToSaveAs">
      </td>
      <td>
        <button onclick="saveTextAsFile()">Save Text to File</button>
      </td>
    </tr>
    <tr>
      <td>Select a File to Load:</td>
      <td>
        <input type="file" id="fileToLoad">
      </td>
      <td>
        <button onclick="loadFileAsText()">Load Selected File</button>
        <td>
    </tr>
  </table>
  <!-- your part: -->
  <div id="editbox" class="textbox"></div>
  <div id="dynamicframe"></div>
</body>

</html>