<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page Editing</title>
<style>
body {
  font-family: 'Palatino Linotype', serif;
}

h1 {
  font-size: large;
  margin-top: 20px;
  margin-bottom: 1px;
}

iframe {
  width: 600px;
  height: 250px;
}

button {
  padding: 3px;
}


#editedHTML {
  width: 600px;
  height: 250px;
  border: darkgray 2px solid;
  overflow: scroll;
  overflow-x: hidden;
}
</style>
<script>
function startEdit() {
  // Turn on design mode in the <iframe>.
  var editor = document.getElementById("pageEditor");
  editor.contentWindow.document.designMode = "on";
}

function stopEdit() {
  // Turn off design mode in the <iframe>.
  var editor = document.getElementById("pageEditor");
  editor.contentWindow.document.designMode = "off";

  // Display the edited HTML (just to prove it's there).
  var htmlDisplay = document.getElementById("editedHTML");
  htmlDisplay.textContent =   editor.contentWindow.document.body.innerHTML;
}
</script>
</head>
<body>

<h1>Editable Page</h1>
<iframe id="pageEditor" src="ApocalypsePage_Revised.html"></iframe>
<div>
  <button onClick="startEdit()">Start Editing</button>
  <button onClick="stopEdit()">Stop Editing</button>
</div>

<h1>Edited HTML</h1>
<div id="editedHTML"></div>
</body>
</html>