Skip to content

Instantly share code, notes, and snippets.

@derekmc

derekmc/htmledit_squarefree.html

Last active May 11, 2021 20:01
Show Gist options
  • Save derekmc/c309e1a21a3acb35847357455caffe43 to your computer and use it in GitHub Desktop.
Save derekmc/c309e1a21a3acb35847357455caffe43 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
htmledit_squarefree.html
<!DOCTYPE html>
<!-- saved from url=(0032)https://htmledit.squarefree.com/ -->
<!-- custom updates so events do not persist. -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Real-time HTML Editor</title>
<script type="text/javascript">
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" style="background: #def;" name="ta" wrap="hard" spellcheck="false">' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = '<h3>Welcome to the real-time HTML editor!<\/h3>\n' +
'<p>Type HTML in the textarea above, and it will magically appear in the frame below.<\/p>';
var POLLDELAY = 300;
var UPDATEDELAY = 1500;
// I don't want this stuff to appear in the box at the top because I feel it's likely to be distracting.
var extraStuff = '<div style="position:absolute; margin:.3em; bottom:0em; right:0em;"><small>\n Modified by <a href="https://github.com/derekmc/" target="_top"> Derek McDaniel</a> original created by <a href="http://www.squarefree.com/" target="_top">Jesse Ruderman<\/a> <\/div>';
var old = '';
let iteration = 0;
let lastframe = 0;
function init()
{
window.editbox.document.write(editboxHTML);
window.editbox.document.close();
window.editbox.document.f.ta.value = defaultStuff;
window.editbox.addEventListener("keydown", ()=> { ++iteration; });
pollUpdate(true);
}
function pollUpdate(now){
var textarea = window.editbox.document.f.ta;
//console.log('iteration', iteration);
let lastiter = iteration;
setTimeout(((lastiter)=>{
return ()=>{
if(lastiter != iteration){
//console.log("skipping update iteration", lastiter);
return;
}
//console.log("updating", lastiter, iteration);
if (old != textarea.value) {
let oldframe = document.getElementById("frame" + lastframe);
if(oldframe) oldframe.remove();
++iteration;
let newframe = document.createElement("frame");
newframe.id = "frame" + iteration;
newframe.name = "frame" + iteration;
newframe.src = "javascript:'';";
let frameset1 = document.getElementById('frameset1');
frameset1.appendChild(newframe);
console.log("updating..");
//console.log('dynamicframe', dynamicframe);
// console.log('document', d);
var d = window["frame" + iteration].document;
lastframe = iteration;
old = textarea.value;
d.open();
d.write(old);
if (old.replace(/[\r\n]/g,'') == defaultStuff.replace(/[\r\n]/g,''))
d.write(extraStuff);
d.close();
}
}
})(iteration), iteration==0? 0 : UPDATEDELAY);
window.setTimeout(pollUpdate, POLLDELAY);
}
</script>
<frameset id="frameset1" resizable="yes" cols="50%,*" onload="init();">
<!-- about:blank confuses opera, so use javascript: URLs instead -->
<frame name="editbox" src="javascript:&#39;&#39;;">
</frameset>
</html>
Raw
serve.bat
start "" "http://localhost:8080"
http-server -c-1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment