<!DOCTYPE html>
<html lang="en">
<head>
<title>AdvEdit v18</title>
<style type="text/css" media="screen">
#editor {
width: 50%;
height: 100vh;
float: left;
border-radius: 0%;
}
iframe {
width: 50%;
height: 100vh;
float: right;
border-radius: 0%;
padding: none;
background: #FFFFFF;
border: none;
}
#editor, iframe {
box-shadow: 0px 0px 1px black;
}
body {
margin: 0;
padding: none;
background: #E8E8E8;
}
</style>
</head>
<body onkeypress="key()">
<noscript><h1><u>You Need Javascript!</u></h1></noscript>
<div id="editor"></div>
<iframe id='preview'></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://togetherjs.com/togetherjs-min.js"></script>
<script>
document.addEventListener("keydown", function(e) {
if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.keyCode == 83) {
e.preventDefault();
// Process the event here (such as click on submit button)
save();
}
else if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.keyCode == 66) {
e.preventDefault();
// Process the event here (such as click on submit button)
btemplate();
}
//Collaborate
else if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.keyCode == 75) {
e.preventDefault();
// Process the event here (such as click on submit button)
collab();
}
else if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.keyCode == 72) {
e.preventDefault();
// Process the event here (such as click on submit button)
//help();
}
else if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.keyCode == 80 && e.shiftKey) {
e.preventDefault();
// Process the event here (such as click on submit button)
//colorpicker();
}
}, false);
var editor = ace.edit("editor");
editor.setTheme("ace/theme/dreamweaver");
editor.session.setMode("ace/mode/html");
editor.setValue('<!DOCTYPE html>\n<html>\n \n</html>');
editor.session.on('change', function(delta) {
console.clear();
console.log('Running.');
var preview = document.getElementById('preview').contentWindow.document;
preview.open();
preview.writeln(editor.getValue());
preview.close();
});
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
function save() {
download('download.html', editor.getValue());
console.log('Saved.')
}
function btemplate() {
editor.setValue('<!DOCTYPE html>\n<html>\n <head>\n <title></title>\n </head>\n <body>\n \n </body>\n</html>');
console.log('Basic Template Used ( Ctrl/CMD B )')
}
function collab() {
TogetherJS(this);
return false;
console.info('Activated Together.js')
}
// function help() {
// window.location='help.html';
// }
// function colorpicker() {
// window.open('http://advedit.rf.gd/cp.html', '_blank');
// }
</script>
</body>
</html>